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

package/CHANGELOG.md

@@ -1,12 +1,15 @@
 # @akinon/pz-theme
 
-## 2.0.73-beta.0
+## 2.0.73
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.73-beta.0
-  - @akinon/theme-contract@2.0.73-beta.0
+- bf2f073c: ZERO-4820: Let a variant attribute show only its first N options with the rest behind a View all control (`optionLimits`, `viewAllLabel`, `viewLessLabel`, `view-all` part); the shopper's own selection always stays on screen and a dropdown is never cut
+- bf2f073c: ZERO-4820: Size a variant photo chip by its width so the product image keeps its own proportions instead of being cropped to a square; a colour chip stays square
+- 67e980e4: ZERO-4820: Add a rail placement for the product gallery's column indicator, so the measure follows the scroll down the edge of a stacked gallery instead of sitting at the midpoint of the whole stack
+- 67e980e4: ZERO-4820: Swipe the product gallery hero between photos, refusing the native image drag and reserving vertical panning for the page, so a phone is not left changing photo through the arrows and the dots alone
+  - @akinon/next@2.0.73
+  - @akinon/theme-contract@2.0.73
 
 ## 2.0.72
 

package/package.json

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

package/src/blocks/__tests__/product-gallery-block.test.tsx

@@ -972,3 +972,175 @@ const declaredStatesFor = (part: string): string[] => {
     });
   }
 );
+
+/**
+ * The rail is the measure that travels with the shopper. Absolute positioning
+ * — the only spelling available before it — pins the row to the midpoint of
+ * the WHOLE stack, which on a seven-photo gallery is off screen for most of
+ * the scroll.
+ */
+describe('ProductGalleryBlock — the column indicator rail', () => {
+  const RAIL = {
+    layout: 'grid',
+    showDots: true,
+    dotDirection: 'column',
+    dotPlacement: 'rail'
+  };
+
+  it('hangs the dots in a full-height gutter that lets clicks through', () => {
+    const { container } = renderBlock(RAIL, PRODUCT);
+    const rail = container.querySelector(
+      '[data-part="dot-rail"]'
+    ) as HTMLElement;
+
+    expect(rail).toBeTruthy();
+    expect(rail.style.position).toBe('absolute');
+    expect(rail.style.height).toBe('100%');
+    // The rail spans the whole stack; without this it would swallow every
+    // click meant for the photographs behind it.
+    expect(rail.style.pointerEvents).toBe('none');
+    expect(rail.querySelector('[data-product-gallery-dots]')).toBeTruthy();
+  });
+
+  it('makes the row itself the part that travels', () => {
+    const { container } = renderBlock(RAIL, PRODUCT);
+    const dots = container.querySelector(
+      '[data-product-gallery-dots]'
+    ) as HTMLElement;
+
+    expect(dots.style.position).toBe('sticky');
+    expect(dots.style.top).toBe('50vh');
+    expect(dots.style.transform).toBe('translateY(-50%)');
+    // Taken back from the rail, or the dots would not be clickable at all.
+    expect(dots.style.pointerEvents).toBe('auto');
+  });
+
+  it('leaves a composition that never asked for a rail alone', () => {
+    const { container } = renderBlock(
+      { layout: 'grid', showDots: true, dotDirection: 'column' },
+      PRODUCT
+    );
+    const dots = container.querySelector(
+      '[data-product-gallery-dots]'
+    ) as HTMLElement;
+
+    expect(container.querySelector('[data-part="dot-rail"]')).toBeNull();
+    expect(dots.style.position).toBe('');
+  });
+
+  it('ignores the rail for a row indicator, which has nowhere to travel', () => {
+    const { container } = renderBlock(
+      { layout: 'grid', showDots: true, dotPlacement: 'rail' },
+      PRODUCT
+    );
+
+    expect(container.querySelector('[data-part="dot-rail"]')).toBeNull();
+  });
+});
+
+/**
+ * The hero swaps one photo for the next rather than scrolling a track, so a
+ * finger drag on it is not something the browser can answer on its own. These
+ * cover the gesture the shopper expects from every other carousel on the site
+ * — and the click the browser sends after it, which must not reach the viewer
+ * trigger lying over the frame.
+ */
+describe('ProductGalleryBlock — swiping the hero', () => {
+  const heroSwipe = (
+    container: HTMLElement,
+    from: number,
+    to: number,
+    clientY = 100
+  ) => {
+    const hero = container.querySelector('[data-product-gallery-main]')!;
+    const init = { pointerId: 7, pointerType: 'touch', clientY };
+
+    fireEvent.pointerDown(hero, { ...init, clientX: from });
+    fireEvent.pointerUp(hero, { ...init, clientX: to });
+  };
+
+  const shown = (container: HTMLElement) =>
+    container
+      .querySelector('[data-product-gallery-main] img')
+      ?.getAttribute('src');
+
+  it('moves to the next photo and back', () => {
+    const { container } = renderBlock({}, PRODUCT);
+
+    heroSwipe(container, 300, 100);
+    expect(shown(container)).toBe('https://cdn.example.com/b.jpg');
+
+    heroSwipe(container, 100, 300);
+    expect(shown(container)).toBe('https://cdn.example.com/a.jpg');
+  });
+
+  it('leaves a tap alone, so the viewer still opens on one', () => {
+    const { container } = renderBlock({}, PRODUCT);
+
+    heroSwipe(container, 200, 202);
+    expect(shown(container)).toBe('https://cdn.example.com/a.jpg');
+  });
+
+  it('reads a mostly-vertical drag as a scroll, not a swipe', () => {
+    const { container } = renderBlock({}, PRODUCT);
+
+    const hero = container.querySelector('[data-product-gallery-main]')!;
+    const init = { pointerId: 7, pointerType: 'touch' };
+
+    fireEvent.pointerDown(hero, { ...init, clientX: 200, clientY: 100 });
+    fireEvent.pointerUp(hero, { ...init, clientX: 140, clientY: 400 });
+
+    expect(shown(container)).toBe('https://cdn.example.com/a.jpg');
+  });
+
+  it('wraps past the ends, exactly as the arrows do', () => {
+    const { container } = renderBlock({}, PRODUCT);
+
+    heroSwipe(container, 100, 300);
+    expect(shown(container)).toBe('https://cdn.example.com/c.jpg');
+  });
+
+  it('stops at the ends once looping is switched off', () => {
+    const { container } = renderBlock({ loopArrows: false }, PRODUCT);
+
+    heroSwipe(container, 100, 300);
+    expect(shown(container)).toBe('https://cdn.example.com/a.jpg');
+  });
+
+  it('swallows the click a swipe ends on, so the viewer stays shut', () => {
+    const { container } = renderBlock({ enableViewer: true }, PRODUCT);
+
+    heroSwipe(container, 300, 100);
+    fireEvent.click(
+      container.querySelector('[data-product-gallery-viewer-open]')!
+    );
+
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
+  });
+
+  it('draws no hero to swipe in the grid, where every photo is on the page', () => {
+    const { container } = renderBlock({ layout: 'grid' }, PRODUCT);
+
+    expect(container.querySelector('[data-product-gallery-main]')).toBeNull();
+    expect(container.querySelectorAll('[data-product-gallery-cell]')).toHaveLength(
+      PRODUCT.images.length
+    );
+  });
+
+  it('refuses the native photo drag that would cancel the gesture', () => {
+    const { container } = renderBlock({}, PRODUCT);
+    const hero = container.querySelector('[data-product-gallery-main]')!;
+
+    const dragStart = fireEvent.dragStart(hero);
+
+    // `fireEvent` reports false once a handler called preventDefault.
+    expect(dragStart).toBe(false);
+  });
+
+  it('never swipes under the author pointer in the designer', () => {
+    const { container } = renderBlock({}, PRODUCT, { isDesigner: true });
+
+    heroSwipe(container, 300, 100);
+    expect(shown(container)).toBe('https://cdn.example.com/a.jpg');
+  });
+});

package/src/blocks/__tests__/variant-drag-scroll.test.tsx

@@ -0,0 +1,228 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import VariantSelectorBlock from '../variant-selector-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+
+/**
+ * A colour strip authored as one non-wrapping row scrolls with a trackpad and
+ * with a finger, but a plain mouse cannot move it at all. `dragToScroll` adds
+ * the missing gesture — and must not add anything else: the row that every
+ * published composition renders wraps, has nothing to scroll, and keeps its
+ * clicks.
+ */
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/p/blue',
+  useSearchParams: () => new URLSearchParams('')
+}));
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ status: 'unauthenticated', data: null })
+}));
+
+jest.mock('@akinon/next/data/client/wishlist', () => ({
+  __esModule: true,
+  useAddStockAlertMutation: () => [
+    jest.fn(() => ({ unwrap: () => Promise.resolve({}) })),
+    { isLoading: false }
+  ]
+}));
+
+const PRODUCT = {
+  pk: 10,
+  title: 'Polo',
+  variants: [
+    {
+      attribute_key: 'color',
+      attribute_name: 'Color',
+      options: [
+        {
+          label: 'Blue',
+          value: 'blue',
+          is_selected: true,
+          is_selectable: true,
+          product: { pk: 11, absolute_url: '/p/blue', stock: 9 }
+        },
+        {
+          label: 'Red',
+          value: 'red',
+          is_selectable: true,
+          product: { pk: 12, absolute_url: '/p/red', stock: 4 }
+        }
+      ]
+    }
+  ]
+};
+
+const renderBlock = (properties: Record<string, unknown>) =>
+  render(
+    <ThemePageContextProvider value={{ product: PRODUCT } as never}>
+      <VariantSelectorBlock
+        {...({
+          block: {
+            id: 'vs',
+            type: 'variant-selector',
+            styles: {},
+            properties,
+            blocks: []
+          },
+          placeholderId: 'p1',
+          sectionId: 's1',
+          isDesigner: false
+        } as never)}
+      />
+    </ThemePageContextProvider>
+  );
+
+/** jsdom lays nothing out and implements no pointer capture; both are stubbed. */
+const makeOverflowing = (element: HTMLElement, scrollWidth = 900) => {
+  Object.defineProperty(element, 'scrollWidth', {
+    configurable: true,
+    value: scrollWidth
+  });
+  Object.defineProperty(element, 'clientWidth', {
+    configurable: true,
+    value: 300
+  });
+  element.setPointerCapture = jest.fn();
+  element.releasePointerCapture = jest.fn();
+  element.hasPointerCapture = jest.fn(() => true);
+  // jsdom's own `scrollLeft` is a no-op that always reads 0, so the value the
+  // hook writes has to be stored somewhere the assertions can see.
+  let scrollLeft = 0;
+  Object.defineProperty(element, 'scrollLeft', {
+    configurable: true,
+    get: () => scrollLeft,
+    set: (value: number) => {
+      scrollLeft = value;
+    }
+  });
+};
+
+const strip = (container: HTMLElement) =>
+  container.querySelector('[data-part="option-list"]') as HTMLElement;
+
+/**
+ * jsdom ships no PointerEvent, and the fallback testing-library builds drops
+ * `clientX` and `pointerType` — the two fields the gesture is made of. The
+ * events are assembled by hand so the handler sees what a browser sends.
+ */
+const pointer = (
+  element: HTMLElement,
+  type: 'pointerdown' | 'pointermove' | 'pointerup',
+  init: Record<string, unknown>
+) => {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.assign(event, {
+    pointerId: 1,
+    pointerType: 'mouse',
+    button: 0,
+    ...init
+  });
+  element.dispatchEvent(event);
+};
+
+const drag = (element: HTMLElement, from: number, to: number) => {
+  pointer(element, 'pointerdown', { clientX: from });
+  pointer(element, 'pointermove', { clientX: to });
+  pointer(element, 'pointerup', { clientX: to });
+};
+
+describe('variant selector drag to scroll', () => {
+  it('does not touch the strip when the property is off', () => {
+    const { container } = renderBlock({});
+    const list = strip(container);
+    makeOverflowing(list);
+
+    drag(list, 200, 60);
+
+    expect(list.scrollLeft).toBe(0);
+    expect(list.style.cursor).toBe('');
+  });
+
+  it('scrolls by the pointer distance while dragging', () => {
+    const { container } = renderBlock({ dragToScroll: true });
+    const list = strip(container);
+    makeOverflowing(list);
+
+    pointer(list, 'pointerdown', { clientX: 200 });
+    pointer(list, 'pointermove', { clientX: 60 });
+
+    // Dragged 140px to the left, so the strip advanced 140px.
+    expect(list.scrollLeft).toBe(140);
+
+    pointer(list, 'pointerup', { clientX: 60 });
+    expect(list.releasePointerCapture).toHaveBeenCalled();
+  });
+
+  it('leaves a strip that fits alone', () => {
+    const { container } = renderBlock({ dragToScroll: true });
+    const list = strip(container);
+    makeOverflowing(list, 300);
+
+    drag(list, 200, 60);
+
+    expect(list.scrollLeft).toBe(0);
+  });
+
+  it('swallows the click that ends a real drag, but not a plain click', () => {
+    const { container } = renderBlock({ dragToScroll: true });
+    const list = strip(container);
+    makeOverflowing(list);
+    const option = list.querySelector(
+      '[data-part="option"]'
+    ) as HTMLElement;
+
+    drag(list, 200, 60);
+    const afterDrag = fireEvent.click(option);
+    expect(afterDrag).toBe(false); // preventDefault() ran
+
+    // A press that never moved is a click, and it goes through untouched.
+    pointer(list, 'pointerdown', { clientX: 100 });
+    pointer(list, 'pointerup', { clientX: 102 });
+    expect(fireEvent.click(option)).toBe(true);
+  });
+
+  it('captures the pointer only once the press becomes a drag', () => {
+    const { container } = renderBlock({ dragToScroll: true });
+    const list = strip(container);
+    makeOverflowing(list);
+
+    // A press that stays put must not capture: capture retargets the click to
+    // this element and the colour link underneath would never be followed.
+    pointer(list, 'pointerdown', { clientX: 200 });
+    pointer(list, 'pointermove', { clientX: 198 });
+    expect(list.setPointerCapture).not.toHaveBeenCalled();
+
+    pointer(list, 'pointermove', { clientX: 120 });
+    expect(list.setPointerCapture).toHaveBeenCalledTimes(1);
+  });
+
+  it('cancels the native drag the links and images would start', () => {
+    const { container } = renderBlock({ dragToScroll: true });
+    const list = strip(container);
+    makeOverflowing(list);
+    const option = list.querySelector('[data-part="option"]') as HTMLElement;
+
+    // Uncancelled, this is the browser taking the gesture over and cutting the
+    // pointer stream the scroll runs on.
+    const dragStart = new Event('dragstart', {
+      bubbles: true,
+      cancelable: true
+    });
+    option.dispatchEvent(dragStart);
+
+    expect(dragStart.defaultPrevented).toBe(true);
+  });
+
+  it('ignores touch, which the browser already scrolls', () => {
+    const { container } = renderBlock({ dragToScroll: true });
+    const list = strip(container);
+    makeOverflowing(list);
+
+    pointer(list, 'pointerdown', { clientX: 200, pointerType: 'touch' });
+    pointer(list, 'pointermove', { clientX: 60 });
+
+    expect(list.scrollLeft).toBe(0);
+  });
+});

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

@@ -815,3 +815,230 @@ describe('two dialogs open at once', () => {
     expect(secondPanel.getAttribute('aria-modal')).toBe('true');
   });
 });
+
+/**
+ * Chip Size is the chip's WIDTH. A square cropped a garment photo to its
+ * centre, so the photo now keeps its own proportions — while a flat colour,
+ * which has no proportions, stays square.
+ */
+describe('chip height', () => {
+  const PHOTO_PRODUCT = {
+    pk: 10,
+    variants: [
+      {
+        attribute_key: 'color',
+        attribute_name: 'Color',
+        options: [
+          {
+            label: 'Blue',
+            value: 'blue',
+            is_selected: true,
+            is_selectable: true,
+            product: {
+              pk: 11,
+              absolute_url: '/p/blue',
+              stock: 9,
+              image: '/media/blue.jpg'
+            },
+            // Carries both a photo and a colour, so one fixture can answer for
+            // either chip content.
+            attributes: { color: '#0000ff' }
+          }
+        ]
+      }
+    ]
+  };
+
+  const renderChip = (properties: Record<string, unknown>) =>
+    render(
+      <ThemePageContextProvider value={{ product: PHOTO_PRODUCT } as never}>
+        <VariantSelectorBlock
+          {...({
+            block: {
+              id: 'vs',
+              type: 'variant-selector',
+              styles: {},
+              properties: {
+                groupLayouts: 'color:chip',
+                swatchContent: 'image',
+                swatchSize: 70,
+                ...properties
+              },
+              order: 0,
+              hidden: false
+            },
+            placeholderId: 'p',
+            sectionId: 's',
+            isDesigner: false,
+            currentBreakpoint: 'desktop'
+          } as never)}
+        />
+      </ThemePageContextProvider>
+    );
+
+  it('sizes a photo chip by width and lets its height follow the image', () => {
+    const photo = renderChip({}).container.querySelector(
+      'img[data-part="swatch"]'
+    ) as HTMLImageElement;
+
+    expect(photo.style.width).toBe('70px');
+    expect(photo.style.height).toBe('auto');
+    // A crop would defeat the ratio the auto height just preserved.
+    expect(photo.style.objectFit).toBe('');
+  });
+
+  it('leaves a colour chip square, which has no ratio to preserve', () => {
+    const chip = renderChip({ swatchContent: 'color' }).container.querySelector(
+      'span[data-part="swatch"]'
+    ) as HTMLElement;
+
+    expect(chip).toBeTruthy();
+    expect(chip.style.width).toBe('70px');
+    expect(chip.style.height).toBe('70px');
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Showing the first N options, with the rest behind a control.        */
+/* ------------------------------------------------------------------ */
+
+describe('collapsing a long option row', () => {
+  /** Twelve colours, the eleventh selected — well past the limit tested. */
+  const MANY = {
+    pk: 10,
+    variants: [
+      {
+        attribute_key: 'color',
+        attribute_name: 'Colors',
+        options: Array.from({ length: 12 }, (_, index) => ({
+          label: `C${index}`,
+          value: `c${index}`,
+          is_selected: index === 10,
+          is_selectable: true,
+          product: { pk: 100 + index, absolute_url: `/p/c${index}` }
+        }))
+      },
+      {
+        attribute_key: 'size',
+        attribute_name: 'Size',
+        options: Array.from({ length: 9 }, (_, index) => ({
+          label: `S${index}`,
+          value: `s${index}`,
+          is_selectable: true,
+          product: { pk: 200 + index, absolute_url: `/p/s${index}` }
+        }))
+      }
+    ]
+  };
+
+  const renderMany = (properties: Record<string, unknown>) =>
+    render(
+      <ThemePageContextProvider value={{ product: MANY } as never}>
+        <VariantSelectorBlock
+          {...({
+            block: {
+              id: 'vs',
+              type: 'variant-selector',
+              styles: {},
+              properties,
+              order: 0,
+              hidden: false
+            },
+            placeholderId: 'p',
+            sectionId: 's',
+            isDesigner: false,
+            currentBreakpoint: 'desktop'
+          } as never)}
+        />
+      </ThemePageContextProvider>
+    );
+
+  const labelsOf = (container: HTMLElement, groupKey: string) =>
+    Array.from(
+      container.querySelectorAll(
+        `[data-variant-group="${groupKey}"] [data-part="option"]`
+      )
+    ).map((node) => node.textContent);
+
+  const viewAll = (container: HTMLElement) =>
+    container.querySelector('[data-part="view-all"]') as HTMLButtonElement;
+
+  it('shows nothing but the first N and offers the rest', () => {
+    const { container } = renderMany({ optionLimits: 'color:8' });
+
+    expect(labelsOf(container, 'color')).toHaveLength(8);
+    expect(viewAll(container).textContent).toBe('View all 12 Colors');
+    expect(viewAll(container).getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('keeps the shopper’s own colour on screen while collapsed', () => {
+    const { container } = renderMany({ optionLimits: 'color:8' });
+    const shown = labelsOf(container, 'color');
+
+    // A plain slice would have stopped at C7 and hidden the selection.
+    expect(shown[7]).toBe('C10');
+    expect(shown.slice(0, 7)).toEqual(['C0', 'C1', 'C2', 'C3', 'C4', 'C5', 'C6']);
+    expect(shown).not.toContain('C7');
+  });
+
+  it('opens the rest out and back on the one control', () => {
+    const { container } = renderMany({
+      optionLimits: 'color:8',
+      viewLessLabel: 'Fewer'
+    });
+
+    fireEvent.click(viewAll(container));
+
+    expect(labelsOf(container, 'color')).toHaveLength(12);
+    expect(viewAll(container).textContent).toBe('Fewer');
+    expect(viewAll(container).getAttribute('aria-expanded')).toBe('true');
+
+    fireEvent.click(viewAll(container));
+    expect(labelsOf(container, 'color')).toHaveLength(8);
+  });
+
+  it('cuts only the attribute it was asked to cut', () => {
+    const { container } = renderMany({ optionLimits: 'color:8' });
+
+    // Nine sizes, no limit named for them: every one of them stays.
+    expect(labelsOf(container, 'size')).toHaveLength(9);
+    expect(
+      container.querySelectorAll('[data-part="view-all"]')
+    ).toHaveLength(1);
+  });
+
+  it('leaves a row shorter than its limit exactly as it was', () => {
+    const { container } = renderMany({ optionLimits: 'color:20' });
+
+    expect(labelsOf(container, 'color')).toHaveLength(12);
+    expect(container.querySelector('[data-part="view-all"]')).toBeNull();
+  });
+
+  it('says the hidden count when the brand asks for it', () => {
+    const { container } = renderMany({
+      optionLimits: 'color:8',
+      viewAllLabel: '+{remaining} more'
+    });
+
+    expect(viewAll(container).textContent).toBe('+4 more');
+  });
+
+  it('never cuts a dropdown, whose list is the only keyboard route', () => {
+    const { container } = renderMany({
+      layout: 'dropdown',
+      optionLimits: 'color:8'
+    });
+
+    expect(
+      container.querySelectorAll('[data-variant-group="color"] option')
+    ).toHaveLength(12);
+    expect(container.querySelector('[data-part="view-all"]')).toBeNull();
+  });
+
+  it('ignores a limit that is not a usable number', () => {
+    const { container } = renderMany({ optionLimits: 'color:0, size:abc' });
+
+    expect(labelsOf(container, 'color')).toHaveLength(12);
+    expect(labelsOf(container, 'size')).toHaveLength(9);
+  });
+});

package/src/blocks/product-gallery-block.tsx

@@ -142,10 +142,11 @@ const CloseIcon = () => (
  * Parts: main, image, zoom-image, zoom-hint, viewer-trigger, viewer-backdrop,
  * viewer, viewer-close, viewer-stage, viewer-image, viewer-arrow,
  * viewer-counter, viewer-thumb-list, viewer-thumb, viewer-thumb-image, arrow,
- * dot-list, dot, thumb-list, thumb, thumb-image, grid.
+ * dot-list, dot-rail, dot, thumb-list, thumb, thumb-image, grid.
  * Properties: layout, gridColumnsDesktop, gridColumnsMobile, showThumbs,
  * aspectRatio, objectFit, thumbSize, thumbPosition, thumbLimit, thumbLabel,
  * gap, showArrows, loopArrows, prevLabel, nextLabel, showDots, dotDirection,
+ * dotPlacement,
  * dotLabel, showCounter, counterLabel, enableZoom, zoomLevel, zoomHint,
  * highResTemplate, enableViewer, viewerOpenLabel, viewerTitle,
  * viewerCloseLabel, viewerShowArrows, viewerPrevLabel, viewerNextLabel,
@@ -270,6 +271,25 @@ const ProductGalleryBlock = ({
   const counterLabel = prop('counterLabel', '{index} / {total}');
   const dotDirectionValue = prop('dotDirection', 'row');
   const dotDirection = dotDirectionValue === 'column' ? 'column' : 'row';
+  /**
+   * Where the column indicator lives.
+   *
+   * `inline` is what the block has always drawn — the row sits in the flow
+   * under the photographs and a designer places it with the Position controls
+   * on the Dot Row. That spelling cannot express the pattern this exists for:
+   * a measure that stays beside the photograph the shopper is looking at.
+   * Absolute positioning pins it to the middle of the WHOLE stack, which on a
+   * seven-photo gallery is off screen for most of the scroll.
+   *
+   * `rail` is the pattern: a full-height gutter down the edge of the stack
+   * holding a sticky track, so the measure travels with the viewport and stops
+   * at the ends of the gallery. Not the default — every published composition
+   * that positioned its own dot row must keep the geometry it authored. A row
+   * indicator is left alone either way: a horizontal measure has nothing to
+   * travel along.
+   */
+  const dotPlacement = prop('dotPlacement', 'inline');
+  const useRail = dotPlacement === 'rail' && dotDirection === 'column';
   const dotLabel = prop('dotLabel', 'Go to image {index}');
 
   const enableZoom = readToggle(
@@ -761,6 +781,88 @@ const ProductGalleryBlock = ({
   const isZooming = (index: number) =>
     zoomPoint !== null && zoomPoint.index === index;
 
+  /**
+   * The same swipe the viewer has, on the frame the shopper actually starts
+   * on. Without it a phone can only change photo through the arrows or the
+   * dots — the drag every other carousel on the site answers to does nothing.
+   *
+   * The hero draws one photo at a time rather than a track, so there is no
+   * scroll to snap and the gesture has to be read by hand. It is deliberately
+   * the plainer half of `handleStagePointer*`: no pinch, no pan, because
+   * neither is reachable here.
+   *
+   * Touch pointers capture to the element that received `pointerdown`, so the
+   * release is heard even when the finger leaves the frame. A mouse drag that
+   * ends outside simply does not swipe, which is the same thing the viewer
+   * does.
+   *
+   * Spread alongside `zoomHandlers` on the frame: the two sets are disjoint
+   * (`move`/`leave` against `down`/`up`/`cancel`/`click`), so neither drops
+   * the other's listener.
+   */
+  const heroGestureRef = useRef<{ x: number; y: number; id: number } | null>(
+    null
+  );
+  const heroDraggedRef = useRef(false);
+
+  const heroSwipe =
+    images.length > 1 && !isDesigner && layout !== 'grid'
+      ? {
+          onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => {
+            heroGestureRef.current = {
+              x: event.clientX,
+              y: event.clientY,
+              id: event.pointerId
+            };
+            heroDraggedRef.current = false;
+          },
+          onPointerUp: (event: React.PointerEvent<HTMLDivElement>) => {
+            const gesture = heroGestureRef.current;
+            heroGestureRef.current = null;
+
+            if (!gesture || gesture.id !== event.pointerId) return;
+
+            const dx = event.clientX - gesture.x;
+            const dy = event.clientY - gesture.y;
+
+            if (Math.abs(dx) < DRAG_SLOP_PX && Math.abs(dy) < DRAG_SLOP_PX) {
+              return;
+            }
+
+            // Past the slop this was a drag, so the click the browser sends
+            // next belongs to the gesture — not to the viewer trigger lying
+            // over the frame, which would otherwise open on every swipe.
+            heroDraggedRef.current = true;
+
+            if (
+              Math.abs(dx) >= SWIPE_THRESHOLD_PX &&
+              Math.abs(dx) > Math.abs(dy)
+            ) {
+              setActiveIndex(step(dx < 0 ? 1 : -1));
+            }
+          },
+          onPointerCancel: () => {
+            heroGestureRef.current = null;
+          },
+          /**
+           * A photo is natively draggable, so a mouse press that starts moving
+           * over one hands the gesture to the browser's own drag-and-drop and
+           * the pointer stream is cancelled — the swipe never reaches its
+           * `pointerup`. Refusing the drag is what leaves the gesture ours.
+           */
+          onDragStart: (event: React.DragEvent<HTMLDivElement>) => {
+            event.preventDefault();
+          },
+          onClickCapture: (event: React.MouseEvent<HTMLDivElement>) => {
+            if (!heroDraggedRef.current) return;
+
+            heroDraggedRef.current = false;
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }
+      : null;
+
   // A frame only needs a positioning context once something is layered over
   // it; adding one unconditionally would change how a brand's own CSS lands.
   const frameNeedsPosition = showArrows || enableViewer || enableZoom;
@@ -814,7 +916,18 @@ const ProductGalleryBlock = ({
         gap: '6px',
         // Only written for the column indicator, so the existing dot row keeps
         // the exact style attribute it has always rendered.
-        ...(dotDirection === 'column' ? { flexDirection: 'column' } : null)
+        ...(dotDirection === 'column' ? { flexDirection: 'column' } : null),
+        // Inside the rail this is the part that travels: sticky against the
+        // scroll, centred on the viewport rather than on the stack, and taking
+        // back the pointer events the rail gave up.
+        ...(useRail
+          ? {
+              position: 'sticky' as const,
+              top: '50vh',
+              transform: 'translateY(-50%)',
+              pointerEvents: 'auto' as const
+            }
+          : null)
       }}
     >
       {images.map((image, index) => (
@@ -1262,7 +1375,41 @@ const ProductGalleryBlock = ({
     // carry, and it scrolls to a cell the same way. An authored cell template
     // exposes neither, so the dots there would render and do nothing at all —
     // better no indicator than a dead one.
-    const gridDots = customCells ? null : dotsNode;
+    /**
+   * Where the column indicator lives.
+   *
+   * `inline` is what the block has always drawn — the row sits in the flow
+   * under the photographs and a designer places it with the Position controls
+   * on the Dot Row. That spelling cannot express the pattern this exists for:
+   * a measure that stays beside the photograph the shopper is looking at.
+   * Absolute positioning pins it to the middle of the WHOLE stack, which on a
+   * seven-photo gallery is off screen for most of the scroll.
+   *
+   * `rail` is the pattern: a full-height gutter down the edge of the stack
+   * holding a sticky track, so the measure travels with the viewport and stops
+   * at the ends of the gallery. Not the default — every published composition
+   * that positioned its own dot row must keep the geometry it authored.
+   */
+    const gridDots = customCells ? null : useRail ? (
+      <div
+        {...partAttrs('dot-rail')}
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          height: '100%',
+          display: 'flex',
+          // The rail spans the whole stack, so it would otherwise swallow
+          // clicks meant for the photographs behind it. The dots themselves
+          // take their own events back below.
+          pointerEvents: 'none'
+        }}
+      >
+        {dotsNode}
+      </div>
+    ) : (
+      dotsNode
+    );
     // Same reason as the dots: without the built-in cells there is nothing to
     // observe, so the number would sit on 1 for the whole scroll.
     const gridCounter = customCells ? null : counterNode;
@@ -1375,6 +1522,7 @@ const ProductGalleryBlock = ({
           empty: viewerFrame.isFallback
         })}
         {...zoomHandlers(safeIndex)}
+        {...heroSwipe}
         style={{
           // Only a gallery with arrows, zoom or the viewer needs a positioning
           // context; adding it unconditionally would change how a brand's own
@@ -1385,6 +1533,10 @@ const ProductGalleryBlock = ({
           minWidth: isSideThumbs ? 0 : undefined,
           aspectRatio,
           overflow: 'hidden',
+          // A horizontal drag belongs to the swipe, a vertical one to the page
+          // it is scrolling. Left to the browser the finger claims both and
+          // the gesture is cancelled the moment the page moves under it.
+          touchAction: heroSwipe ? 'pan-y' : undefined,
           background: 'var(--product-gallery-bg, #f3f4f6)'
         }}
       >

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

@@ -7,6 +7,7 @@ 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 { useDragScroll } from '../hooks/use-drag-scroll';
 import { BlockRendererProps } from './block-renderer-registry';
 import {
   DesignerPlaceholder,
@@ -75,7 +76,7 @@ const fillTemplate = (
   template: string,
   tokens: Record<string, string>
 ): string =>
-  template.replace(/\{(option|attribute|product)\}/g, (match, key: string) =>
+  template.replace(/\{(option|attribute|product|count|remaining)\}/g, (match, key: string) =>
     tokens[key] === undefined ? match : tokens[key]
   );
 
@@ -99,6 +100,29 @@ type OpenAlert = {
  * called `swatch` here precisely because that word already means the bordered
  * box one control higher up the same panel.
  */
+/**
+ * The row of options, as its own component so each group gets its own drag
+ * handle: the strip is rendered inside a `groups.map`, and one ref shared by
+ * every group would attach the gesture to whichever row rendered last.
+ */
+const OptionStrip = ({
+  dragToScroll,
+  style,
+  children
+}: {
+  dragToScroll: boolean;
+  style: React.CSSProperties;
+  children: React.ReactNode;
+}) => {
+  const ref = useDragScroll<HTMLDivElement>(dragToScroll);
+
+  return (
+    <div ref={ref} {...partAttrs('option-list')} style={style}>
+      {children}
+    </div>
+  );
+};
+
 const GROUP_LAYOUTS = ['box', 'chip', 'dropdown', 'text'];
 const SWATCH_CONTENTS = ['auto', 'color', 'image'];
 const DISABLED_STYLES = ['line-through', 'diagonal', 'none'];
@@ -129,6 +153,54 @@ const parseGroupLayouts = (raw: unknown): Record<string, string> => {
   return map;
 };
 
+/**
+ * How many options one attribute shows before it collapses, keyed the same way
+ * `groupLayouts` is — `color:8`. Per attribute rather than block-wide on
+ * purpose: a colour strip of 36 photos needs cutting, and the size row beside
+ * it, nine boxes long, must not be cut with it. A limit of 0 or less, or one
+ * that is not a number, is dropped rather than guessed at.
+ */
+const parseOptionLimits = (raw: unknown): Record<string, number> => {
+  const map: Record<string, number> = {};
+
+  String(raw || '')
+    .split(',')
+    .forEach((entry) => {
+      const separator = entry.indexOf(':');
+      if (separator === -1) return;
+
+      const key = entry.slice(0, separator).trim().toLowerCase();
+      const limit = Math.floor(Number(entry.slice(separator + 1).trim()));
+
+      if (key && Number.isFinite(limit) && limit > 0) map[key] = limit;
+    });
+
+  return map;
+};
+
+/**
+ * The visible slice while a group is collapsed.
+ *
+ * The shopper's own selection is never cut away: if it sits past the limit it
+ * takes the last visible slot, because a colour strip that hides the colour
+ * the shopper is looking at reads as a bug, and the label above the row would
+ * then name a chip nobody can see. Everything else keeps commerce's order.
+ */
+const collapseOptions = <T,>(
+  options: T[],
+  limit: number,
+  isSelected: (option: T) => boolean
+): T[] => {
+  if (limit <= 0 || options.length <= limit) return options;
+
+  const head = options.slice(0, limit);
+  if (head.some(isSelected)) return head;
+
+  const selected = options.find(isSelected);
+
+  return selected ? [...options.slice(0, limit - 1), selected] : head;
+};
+
 /**
  * Functional PDP block: renders the commerce variant matrix
  * (product.variants). Each option is its own product URL, so selecting a
@@ -140,12 +212,14 @@ const parseGroupLayouts = (raw: unknown): Record<string, string> => {
  * 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,
+ * view-all, 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,
+ * Properties: layout, groupLayouts, optionLimits, viewAllLabel, viewLessLabel,
+ * showGroupLabel, showSelectedValue,
  * selectedValueSeparator, swatchContent, swatchSize, disabledStyle,
- * strikeWidth, lowStockThreshold, lowStockLabel, gap, optionGap, stockAlert,
+ * strikeWidth, lowStockThreshold, lowStockLabel, gap, optionGap, dragToScroll,
+ * stockAlert,
  * stockAlertPresentation, stockAlertTriggerLabel, stockAlertTitle,
  * stockAlertDescription, stockAlertEmailLabel, stockAlertEmailPlaceholder,
  * stockAlertConsentText, stockAlertConsentRequired, stockAlertSubmitLabel,
@@ -165,6 +239,13 @@ const VariantSelectorBlock = ({
   const [addStockAlert, { isLoading: isAlertSubmitting }] =
     useAddStockAlertMutation();
 
+  // Which attributes the shopper has opened out, keyed by group. Collapsed is
+  // the server-rendered state for every one of them, so the markup a crawler
+  // and the first paint see is the same short row the design asks for.
+  const [expandedGroups, setExpandedGroups] = React.useState<
+    Record<string, boolean>
+  >({});
+
   const [openAlert, setOpenAlert] = React.useState<OpenAlert | null>(null);
   const [alertEmail, setAlertEmail] = React.useState('');
   const [alertConsent, setAlertConsent] = React.useState(false);
@@ -194,10 +275,24 @@ const VariantSelectorBlock = ({
   const optionGap = Number(
     getResponsiveValue(block.properties?.optionGap, currentBreakpoint, 8)
   );
+  /**
+   * Off by default: a wrapping row of options has nothing to drag, and every
+   * published composition renders one. It earns its keep only where the author
+   * has turned the row into a horizontal strip (`flex-wrap: nowrap` with
+   * `overflow-x: auto`), which is a styling decision this block does not make.
+   */
+  const dragToScroll = readToggle(
+    block.properties?.dragToScroll,
+    currentBreakpoint,
+    false
+  );
 
   const groupLayouts = parseGroupLayouts(
     getResponsiveValue(block.properties?.groupLayouts, currentBreakpoint, '')
   );
+  const optionLimits = parseOptionLimits(
+    getResponsiveValue(block.properties?.optionLimits, currentBreakpoint, '')
+  );
   const swatchContentValue = String(
     getResponsiveValue(block.properties?.swatchContent, currentBreakpoint, 'auto')
   );
@@ -256,6 +351,24 @@ const VariantSelectorBlock = ({
     )
   );
 
+  // Every word the shopper reads is the brand's. {count} is the whole option
+  // count and {remaining} the hidden tail, so "View all 11 colors" and "+3
+  // more" are both authorable without touching the renderer.
+  const viewAllLabel = String(
+    getResponsiveValue(
+      block.properties?.viewAllLabel,
+      currentBreakpoint,
+      'View all {count} {attribute}'
+    )
+  );
+  const viewLessLabel = String(
+    getResponsiveValue(
+      block.properties?.viewLessLabel,
+      currentBreakpoint,
+      'Show less'
+    )
+  );
+
   /**
    * The whole back-in-stock capability behind one switch, off by default: a
    * composition nobody edited must keep rendering the inert struck-through
@@ -716,6 +829,31 @@ const VariantSelectorBlock = ({
         const override = attributeKey ? groupLayouts[attributeKey] : undefined;
         const groupLayout =
           override || (layout === 'dropdown' ? 'dropdown' : 'box');
+
+        // A dropdown is already one line tall, so nothing is gained by cutting
+        // its <option> list — and cutting it would hide options from the one
+        // control that lets a shopper reach them by keyboard alone.
+        const optionLimit =
+          groupLayout === 'dropdown' ? 0 : optionLimits[attributeKey] || 0;
+        const isExpanded = expandedGroups[groupKey] === true;
+        const isCollapsible = optionLimit > 0 && options.length > optionLimit;
+        const visibleOptions =
+          isCollapsible && !isExpanded
+            ? collapseOptions(
+                options,
+                optionLimit,
+                (option) => option?.is_selected === true
+              )
+            : options;
+        const hiddenCount = options.length - visibleOptions.length;
+        const viewToggleLabel = fillTemplate(
+          isExpanded ? viewLessLabel : viewAllLabel,
+          {
+            count: String(options.length),
+            remaining: String(hiddenCount),
+            attribute: String(group.attribute_name || '')
+          }
+        );
         const selectedLabel = String(
           selectedOption?.label || selectedOption?.value || ''
         );
@@ -778,9 +916,17 @@ const VariantSelectorBlock = ({
                     {...partAttrs('swatch')}
                     style={{
                       display: 'block',
+                      // Chip Size is the WIDTH here, not a box. A square
+                      // cropped the photo to its centre, which on a garment
+                      // strip drew every colour as the same headless torso —
+                      // so the height follows the image and no object-fit is
+                      // set, because a crop would defeat the ratio.
+                      //
+                      // The COLOUR swatch above stays square: a flat colour
+                      // has no proportions to preserve, and an auto height
+                      // there collapses the chip to nothing.
                       width: `${swatchSize}px`,
-                      height: `${swatchSize}px`,
-                      objectFit: 'cover'
+                      height: 'auto'
                     }}
                   />
                 ) : null;
@@ -1059,16 +1205,48 @@ const VariantSelectorBlock = ({
                 ))}
               </select>
             ) : (
-              <div
-                {...partAttrs('option-list')}
+              <OptionStrip
+                dragToScroll={dragToScroll}
                 style={{
                   display: 'flex',
                   flexWrap: 'wrap',
                   gap: `${safeOptionGap}px`
                 }}
               >
-                {options.map(renderOption)}
-              </div>
+                {visibleOptions.map(renderOption)}
+              </OptionStrip>
+            )}
+
+            {/* A real button, not a link: opening the rest of a row navigates
+                nowhere, and every option it reveals is itself a link that
+                does. `aria-controls` is left off — the row it opens has no id
+                of its own, and a broken pointer reads worse than none. */}
+            {isCollapsible && viewToggleLabel && (
+              <button
+                type="button"
+                data-variant-view-all=""
+                {...partAttrs('view-all')}
+                aria-expanded={isExpanded}
+                onClick={() =>
+                  setExpandedGroups((current) => ({
+                    ...current,
+                    [groupKey]: !isExpanded
+                  }))
+                }
+                style={{
+                  display: 'inline-block',
+                  marginTop: '8px',
+                  padding: 0,
+                  font: 'inherit',
+                  color: 'inherit',
+                  background: 'transparent',
+                  border: 0,
+                  cursor: 'pointer',
+                  textDecoration: 'underline'
+                }}
+              >
+                {viewToggleLabel}
+              </button>
             )}
 
             {/* Inline: drawn in the group that owns the sold-out option, so

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

@@ -0,0 +1,153 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Grab-and-drag for a horizontally scrolling strip.
+ *
+ * A strip authored with `overflow-x: auto` already scrolls: a trackpad, a
+ * shift-wheel and a finger all move it. A MOUSE does not — no browser drags a
+ * scroll container by its content, so on a desktop with a plain mouse the
+ * strip reads as a static crop of a longer row and the shopper never learns
+ * the rest is there. That gap is what this closes, and it is the only reason
+ * it exists: it adds no scrolling that CSS does not already do, it adds the
+ * one gesture CSS cannot express.
+ *
+ * Pointer events, not mouse events, so pointer capture does the hard part: the
+ * drag survives the cursor leaving the element and releases correctly when the
+ * button comes up over some other part of the page. Touch is deliberately left
+ * alone — the browser's own inertial scrolling is better than anything this
+ * can do, and hijacking it costs the fling.
+ *
+ * A drag that ends on top of a link would otherwise navigate. The click that
+ * follows a real drag (more than `DRAG_THRESHOLD` px) is swallowed once, in
+ * the capture phase, before it reaches the option underneath. A press that
+ * never moved is left completely alone, so picking a colour by clicking it
+ * still works exactly as it did.
+ */
+
+/** Below this the gesture is a click, above it a drag. */
+const DRAG_THRESHOLD = 4;
+
+export const useDragScroll = <T extends HTMLElement>(enabled: boolean) => {
+  const ref = useRef<T | null>(null);
+  const state = useRef({
+    active: false,
+    captured: false,
+    startX: 0,
+    startScroll: 0,
+    moved: 0
+  });
+
+  const swallowNextClick = useCallback((element: T) => {
+    const onClick = (event: MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    element.addEventListener('click', onClick, {
+      capture: true,
+      once: true
+    });
+
+    // The click only arrives when the pointer came up over a clickable child.
+    // Without this the listener would sit there and eat the NEXT honest click
+    // instead — the one the shopper meant.
+    window.setTimeout(
+      () => element.removeEventListener('click', onClick, { capture: true }),
+      0
+    );
+  }, []);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || !enabled) return;
+
+    const onPointerDown = (event: PointerEvent) => {
+      // Touch scrolls itself; a secondary button belongs to the context menu.
+      // Written as `> 0` rather than `!== 0` so a synthetic event that carries
+      // no button at all still counts as the primary one.
+      if (event.pointerType === 'touch' || event.button > 0) return;
+      // Nothing to drag: a strip that fits is not a strip.
+      if (element.scrollWidth <= element.clientWidth) return;
+
+      state.current = {
+        active: true,
+        captured: false,
+        startX: event.clientX,
+        startScroll: element.scrollLeft,
+        moved: 0
+      };
+    };
+
+    const onPointerMove = (event: PointerEvent) => {
+      if (!state.current.active) return;
+
+      const dx = event.clientX - state.current.startX;
+      state.current.moved = Math.max(state.current.moved, Math.abs(dx));
+
+      // Nothing happens until the press has travelled far enough to be a drag,
+      // and the pointer is captured only then. Capturing on the press instead
+      // retargets the compatibility mouse events to THIS element, so the click
+      // never reaches the link underneath and picking a colour stops working —
+      // the strip scrolled beautifully and navigated nowhere.
+      if (state.current.moved <= DRAG_THRESHOLD) return;
+
+      if (!state.current.captured) {
+        state.current.captured = true;
+        element.setPointerCapture(event.pointerId);
+        element.style.cursor = 'grabbing';
+        element.style.userSelect = 'none';
+      }
+
+      element.scrollLeft = state.current.startScroll - dx;
+    };
+
+    const end = (event: PointerEvent) => {
+      if (!state.current.active) return;
+
+      const dragged = state.current.moved > DRAG_THRESHOLD;
+      const captured = state.current.captured;
+      state.current.active = false;
+      state.current.captured = false;
+
+      if (captured && element.hasPointerCapture(event.pointerId)) {
+        element.releasePointerCapture(event.pointerId);
+      }
+      element.style.cursor = 'grab';
+      element.style.removeProperty('user-select');
+
+      if (dragged) swallowNextClick(element);
+    };
+
+    /**
+     * The options are links around images, and both are natively draggable:
+     * the browser answers a press-and-move by starting its own drag-and-drop,
+     * which STOPS the pointer stream this hook lives on. Cancelling `dragstart`
+     * is what hands the gesture back — without it the strip never moves, the
+     * ghost image follows the cursor instead, and the only visible sign is the
+     * copy cursor. Cancelled here rather than by `preventDefault()` on the
+     * press, which would also swallow focus.
+     */
+    const onDragStart = (event: Event) => event.preventDefault();
+
+    element.style.cursor = 'grab';
+    element.addEventListener('dragstart', onDragStart);
+    element.addEventListener('pointerdown', onPointerDown);
+    element.addEventListener('pointermove', onPointerMove);
+    element.addEventListener('pointerup', end);
+    element.addEventListener('pointercancel', end);
+
+    return () => {
+      element.style.removeProperty('cursor');
+      element.style.removeProperty('user-select');
+      element.removeEventListener('dragstart', onDragStart);
+      element.removeEventListener('pointerdown', onPointerDown);
+      element.removeEventListener('pointermove', onPointerMove);
+      element.removeEventListener('pointerup', end);
+      element.removeEventListener('pointercancel', end);
+    };
+  }, [enabled, swallowNextClick]);
+
+  return ref;
+};