@design-edito/tools 0.5.31 → 0.5.33

package/components/Gallery/index.js

@@ -1,118 +1,159 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, useEffect, useState, useRef } from 'react';
+import { Children, useCallback, useEffect, useRef, useState } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
 import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
 import { gallery as publicClassName } from '../public-classnames.js';
-import { forceActivateSlot } from './utils.js';
+import { EMPTY_GEOMETRY, measureGeometry, readActiveIndex, readReach } from './utils.js';
 import cssModule from './styles.module.css';
-/** Resolves one side's padding to a CSS length, falling back to the shorthand then to `0px`. */
-function resolvePadding(side, shorthand) {
+/** Resolves one side's offset to a CSS length, falling back to the shorthand then to `0px`. */
+function resolveOffset(side, shorthand) {
     const value = side ?? shorthand ?? 0;
     return typeof value === 'number' ? `${value}px` : value;
 }
 /**
- * Horizontally scrollable gallery component with navigation controls and pagination.
+ * Horizontally scrollable gallery, with navigation controls and pagination.
  *
- * Tracks the active slot based on scroll position and exposes state through CSS class names
- * and a `data-active` attribute on the root element.
+ * Geometry is measured **once per layout change** into a table of scroll positions, one
+ * per slot, and the boundaries between them. A scroll event then only has to place a
+ * number between two others — no element is measured while the reader scrolls.
+ *
+ * The same table is what the controls scroll to, so reading the active slot and moving
+ * to one cannot disagree, with or without snapping.
+ *
+ * ### CSS elements
+ * - `scroller`
+ * - `slot`, `slot--active`
+ * - `actions`, `prev`, `next`
+ * - `pagination`, `page`, `page--active`
+ *
+ * Root modifiers: `controlled`, `no-snap`, `measured`, `at-first`, `at-last`,
+ * `can-go-left`, `can-go-right`.
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A container element wrapping:
- * - A scrollable area containing each child in a slot wrapper,
- * - Previous/next navigation controls,
- * - Pagination controls allowing direct slot activation.
+ * @returns A container wrapping the scroller, the two controls and the pagination.
+ *
+ * @remarks
+ * Nothing is measured while the reader scrolls: the table is rebuilt only when a box
+ * changes size or a slot is added, watched through a `ResizeObserver`. Until the first
+ * measurement lands, the root carries no `measured` modifier and every slot position
+ * reads as `0`.
  */
-export const Gallery = ({ paddingLeft, paddingRight, padding, prevButtonContent, nextButtonContent, paginationContent, defaultActive, active, noSnap, onPrevClicked, onNextClicked, onPaginationClicked, onActiveSlotChanged, onCanGoLeftChanged, onCanGoRightChanged, children, className }) => {
+export const Gallery = ({ offsetLeft, offsetRight, offset, prevButtonContent, nextButtonContent, paginationContent, defaultActive, active, noSnap, onPrevClicked, onNextClicked, onPaginationClicked, onActiveSlotChanged, onCanGoLeftChanged, onCanGoRightChanged, children, className }) => {
     // State & refs
     const scrollerRef = useRef(null);
-    const [activeIndex, setActiveIndex] = useState(0);
+    const geometryRef = useRef(EMPTY_GEOMETRY);
+    const [scrolledIndex, setScrolledIndex] = useState(0);
+    const [isMeasured, setIsMeasured] = useState(false);
     const [canGoLeft, setCanGoLeft] = useState(false);
     const [canGoRight, setCanGoRight] = useState(false);
     const childrenCount = Children.count(children);
     const isControlled = active !== undefined;
+    // Controlled, the prop is the answer: the class names and `data-active` say where the
+    // gallery was told to be, rather than where a smooth scroll has got to so far.
+    const activeIndex = active ?? scrolledIndex;
     // State dispatch
     useChangeDispatch(activeIndex, onActiveSlotChanged);
     useChangeDispatch(canGoLeft, onCanGoLeftChanged);
     useChangeDispatch(canGoRight, onCanGoRightChanged);
+    const readScroll = useCallback(() => {
+        const scrollerElt = scrollerRef.current;
+        if (scrollerElt === null)
+            return;
+        const { scrollLeft } = scrollerElt;
+        const geometry = geometryRef.current;
+        setScrolledIndex(readActiveIndex(geometry, scrollLeft));
+        const { canGoLeft, canGoRight } = readReach(geometry, scrollLeft);
+        setCanGoLeft(canGoLeft);
+        setCanGoRight(canGoRight);
+    }, []);
+    const measure = useCallback(() => {
+        const scrollerElt = scrollerRef.current;
+        if (scrollerElt === null)
+            return;
+        geometryRef.current = measureGeometry(scrollerElt);
+        setIsMeasured(true);
+        readScroll();
+    }, [readScroll]);
+    const scrollToSlot = useCallback((pos, smooth = true) => {
+        const scrollerElt = scrollerRef.current;
+        const scrollPosition = geometryRef.current.scrollPositions[pos];
+        if (scrollerElt === null || scrollPosition === undefined)
+            return;
+        scrollerElt.scrollTo({ left: scrollPosition, behavior: smooth ? 'smooth' : 'instant' });
+    }, []);
     // User actions handlers
     const handlePrevClick = () => {
         onPrevClicked?.(activeIndex);
         if (isControlled)
             return;
-        forceActivateSlot(scrollerRef.current, activeIndex - 1);
+        scrollToSlot(activeIndex - 1);
     };
     const handleNextClick = () => {
         onNextClicked?.(activeIndex);
         if (isControlled)
             return;
-        forceActivateSlot(scrollerRef.current, activeIndex + 1);
+        scrollToSlot(activeIndex + 1);
     };
     const handlePaginationClick = (pos) => {
         onPaginationClicked?.(activeIndex, pos);
         if (isControlled)
             return;
-        forceActivateSlot(scrollerRef.current, pos);
+        scrollToSlot(pos);
     };
-    // Scroll position calculation
+    // Fx. dep. childrenCount - Measure, and measure again whenever a box changes size.
+    // Watching the slots and not only the scroller is what makes a late image or font
+    // land correctly, where a delay after mount could only guess.
+    useEffect(() => {
+        const scrollerElt = scrollerRef.current;
+        if (scrollerElt === null)
+            return;
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(scrollerElt);
+        Array.from(scrollerElt.children).forEach(child => observer.observe(child));
+        return () => observer.disconnect();
+    }, [childrenCount, measure]);
+    // Fx. no dep. - One read per frame while scrolling, and it touches no element.
     useEffect(() => {
         const scrollerElt = scrollerRef.current;
         if (scrollerElt === null)
             return;
-        scrollerElt.scrollBy(-1, 0);
         let animationFrame = null;
-        const update = () => {
-            animationFrame = null;
-            const { scrollLeft, clientWidth, scrollWidth } = scrollerElt;
-            const center = scrollLeft + clientWidth / 2;
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- scrollerElt.children (HTMLCollection) always contains Element/HTMLElement nodes
-            const children = Array.from(scrollerElt.children);
-            let closestIndex = 0;
-            let closestDistance = Infinity;
-            children.forEach((child, index) => {
-                const childCenter = child.offsetLeft + child.offsetWidth / 2;
-                const distance = Math.abs(center - childCenter);
-                if (distance < closestDistance) {
-                    closestDistance = distance;
-                    closestIndex = index;
-                }
-            });
-            setActiveIndex(closestIndex);
-            setCanGoLeft(scrollLeft > 0);
-            setCanGoRight(scrollLeft + clientWidth < scrollWidth);
-        };
         const onScroll = () => {
             if (animationFrame !== null)
                 return;
-            animationFrame = requestAnimationFrame(update);
+            animationFrame = requestAnimationFrame(() => {
+                animationFrame = null;
+                readScroll();
+            });
         };
         scrollerElt.addEventListener('scroll', onScroll, { passive: true });
-        update();
         return () => {
             scrollerElt.removeEventListener('scroll', onScroll);
             if (animationFrame !== null)
                 cancelAnimationFrame(animationFrame);
         };
-    }, []);
-    // Sync scroll position to 'active' prop at mount time
+    }, [readScroll]);
+    // Fx. no dep. - Place the gallery where it starts, once the table exists.
     useEffect(() => {
         const toActivate = active ?? defaultActive;
         if (toActivate === undefined)
             return;
-        const id = setTimeout(() => forceActivateSlot(scrollerRef.current, toActivate, false), 50);
-        return () => clearTimeout(id);
+        scrollToSlot(toActivate, false);
     }, []);
-    // Sync scroll position to 'active' prop
+    // Fx. dep. active - Follow the controlled index.
     useEffect(() => {
         if (active === undefined)
             return;
-        forceActivateSlot(scrollerRef.current, active);
+        scrollToSlot(active);
     }, [active]);
     // Rendering
     const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(null, {
-        'controlled': active !== undefined,
+        'controlled': isControlled,
         'no-snap': noSnap === true,
+        'measured': isMeasured,
         'at-first': activeIndex === 0,
         'at-last': activeIndex === childrenCount - 1,
         'can-go-left': canGoLeft,
@@ -124,25 +165,23 @@ export const Gallery = ({ paddingLeft, paddingRight, padding, prevButtonContent,
     const nextBtnClss = c('next');
     const paginationClss = c('pagination');
     const dataAttributes = { 'data-active': `${activeIndex}` };
-    const actualPaddingLeft = resolvePadding(paddingLeft, padding);
-    const actualPaddingRight = resolvePadding(paddingRight, padding);
+    const actualOffsetLeft = resolveOffset(offsetLeft, offset);
+    const actualOffsetRight = resolveOffset(offsetRight, offset);
     return _jsxs("div", { className: rootClss, ...dataAttributes, children: [_jsx("div", { className: scrollerClss, ref: scrollerRef, children: Children.map(children, (child, pos) => {
                     const slotClss = c('slot', { active: pos === activeIndex });
                     const style = {
                         'margin-left': pos === 0
-                            ? actualPaddingLeft
+                            ? actualOffsetLeft
                             : undefined,
-                        'margin-right': pos === Children.count(children) - 1
-                            ? actualPaddingRight
+                        'margin-right': pos === childrenCount - 1
+                            ? actualOffsetRight
                             : undefined
                     };
                     return _jsx("div", { className: slotClss, style: { ...style }, "data-slot": pos, children: child }, pos);
                 }) }), _jsxs("div", { className: actionsClss, children: [_jsx("div", { className: prevBtnClss, onClick: handlePrevClick, children: prevButtonContent ?? 'prev' }), _jsx("div", { className: nextBtnClss, onClick: handleNextClick, children: nextButtonContent ?? 'next' })] }), _jsx("div", { className: paginationClss, children: Children.map(children, (_, pos) => {
                     const pageClss = c('page', { active: pos === activeIndex });
-                    return _jsx("div", { className: pageClss, "data-page": pos, onClick: () => handlePaginationClick(pos), children: typeof paginationContent === 'string'
-                            ? paginationContent
-                            : typeof paginationContent === 'function'
-                                ? paginationContent(pos)
-                                : pos });
+                    return _jsx("div", { className: pageClss, "data-page": pos, onClick: () => handlePaginationClick(pos), children: typeof paginationContent === 'function'
+                            ? paginationContent(pos)
+                            : paginationContent ?? pos });
                 }) })] });
 };

package/components/Gallery/utils.d.ts

@@ -1 +1,36 @@
-export declare const forceActivateSlot: (div: HTMLDivElement | null, targetPos: number, smooth?: boolean) => void;
+/** The layout, measured once, so that reading the active slot touches no element. */
+export type Geometry = {
+    /** Scroll positions that bring each slot to the middle, clamped to the track. */
+    scrollPositions: number[];
+    /** Midpoints between consecutive slot centres, in content coordinates. */
+    boundaries: number[];
+    /** Half the viewport, kept here rather than read again on every scroll. */
+    halfViewport: number;
+    /** The far end of the track. */
+    maxScroll: number;
+};
+export declare const EMPTY_GEOMETRY: Geometry;
+/**
+ * Everything the gallery needs to know about its own layout.
+ *
+ * Positions are taken against the scroller's own box rather than the DOM's `offsetLeft`,
+ * which is relative to whichever ancestor happens to be positioned — so a gallery nested
+ * anywhere measures the same.
+ *
+ * **Boundaries come from slot centres, and scroll positions are clamped.** Keeping them
+ * apart is what avoids ties: two slots at the same end of the track share a scroll
+ * position, but never a centre, so every slot owns a range of its own.
+ */
+export declare function measureGeometry(scroller: HTMLElement): Geometry;
+/**
+ * Which slot the middle of the viewport is nearest — numbers only, whatever the count.
+ *
+ * Same answer as walking the slots and keeping the closest centre, which is what the
+ * table was built from.
+ */
+export declare function readActiveIndex(geometry: Geometry, scrollLeft: number): number;
+/** Whether there is track left on each side, within {@link EDGE_TOLERANCE}. */
+export declare function readReach(geometry: Geometry, scrollLeft: number): {
+    canGoLeft: boolean;
+    canGoRight: boolean;
+};

package/components/Gallery/utils.js

@@ -1,16 +1,58 @@
-export const forceActivateSlot = (div, targetPos, smooth = true) => {
-    if (div === null)
-        return;
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- div.children (HTMLCollection) always contains Element/HTMLElement nodes
-    const children = Array.from(div.children);
-    if (children[targetPos] === undefined)
-        return;
-    const target = children[targetPos];
-    const halfClientWidth = div.clientWidth / 2;
-    const halfOffsetWidth = div.offsetWidth / 2;
-    const offset = target.offsetLeft - (halfClientWidth - halfOffsetWidth);
-    div.scrollTo({
-        left: offset,
-        behavior: smooth ? 'smooth' : 'instant'
-    });
+/** A tolerance in px, so a sub-pixel scroll position does not read as « can still go ». */
+const EDGE_TOLERANCE = 1;
+export const EMPTY_GEOMETRY = {
+    scrollPositions: [],
+    boundaries: [],
+    halfViewport: 0,
+    maxScroll: 0
 };
+/**
+ * Everything the gallery needs to know about its own layout.
+ *
+ * Positions are taken against the scroller's own box rather than the DOM's `offsetLeft`,
+ * which is relative to whichever ancestor happens to be positioned — so a gallery nested
+ * anywhere measures the same.
+ *
+ * **Boundaries come from slot centres, and scroll positions are clamped.** Keeping them
+ * apart is what avoids ties: two slots at the same end of the track share a scroll
+ * position, but never a centre, so every slot owns a range of its own.
+ */
+export function measureGeometry(scroller) {
+    const { clientWidth, scrollWidth, scrollLeft } = scroller;
+    const halfViewport = clientWidth / 2;
+    const maxScroll = Math.max(0, scrollWidth - clientWidth);
+    const scrollerLeft = scroller.getBoundingClientRect().left;
+    const centers = Array.from(scroller.children).map(child => {
+        const rect = child.getBoundingClientRect();
+        return rect.left - scrollerLeft + scrollLeft + rect.width / 2;
+    });
+    return {
+        scrollPositions: centers.map(center => Math.min(Math.max(center - halfViewport, 0), maxScroll)),
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- i is in range by construction, centers[i] sits before the one being mapped
+        boundaries: centers.slice(1).map((center, i) => (centers[i] + center) / 2),
+        halfViewport,
+        maxScroll
+    };
+}
+/**
+ * Which slot the middle of the viewport is nearest — numbers only, whatever the count.
+ *
+ * Same answer as walking the slots and keeping the closest centre, which is what the
+ * table was built from.
+ */
+export function readActiveIndex(geometry, scrollLeft) {
+    const { boundaries, halfViewport } = geometry;
+    const viewportCenter = scrollLeft + halfViewport;
+    let index = 0;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- index is bounded by the loop condition
+    while (index < boundaries.length && viewportCenter > boundaries[index])
+        index += 1;
+    return index;
+}
+/** Whether there is track left on each side, within {@link EDGE_TOLERANCE}. */
+export function readReach(geometry, scrollLeft) {
+    return {
+        canGoLeft: scrollLeft > EDGE_TOLERANCE,
+        canGoRight: scrollLeft < geometry.maxScroll - EDGE_TOLERANCE
+    };
+}

package/components/index.d.ts

@@ -3,9 +3,8 @@ export * as button from './Button/index.js'
 export * as clippable from './Clippable/index.js'
 export * as disclaimer from './Disclaimer/index.js'
 export * as drawer from './Drawer/index.js'
-export * as gallery from './Gallery/index.js'
 export * as eventListener from './EventListener/index.js'
-export * as galleryAlt from './GalleryAlt/index.js'
+export * as gallery from './Gallery/index.js'
 export * as iframe from './Iframe/index.js'
 export * as image from './Image/index.js'
 export * as input from './Input/index.js'

package/components/index.js

@@ -3,9 +3,8 @@ export * as button from './Button/index.js'
 export * as clippable from './Clippable/index.js'
 export * as disclaimer from './Disclaimer/index.js'
 export * as drawer from './Drawer/index.js'
-export * as gallery from './Gallery/index.js'
 export * as eventListener from './EventListener/index.js'
-export * as galleryAlt from './GalleryAlt/index.js'
+export * as gallery from './Gallery/index.js'
 export * as iframe from './Iframe/index.js'
 export * as image from './Image/index.js'
 export * as input from './Input/index.js'

package/components/public-classnames.d.ts

@@ -5,7 +5,6 @@ export declare const disclaimer = "lm-disclaimer";
 export declare const drawer = "lm-drawer";
 export declare const eventListener = "lm-event-listener";
 export declare const gallery = "lm-gallery";
-export declare const galleryAlt = "lm-gallery-alt";
 export declare const iframe = "lm-iframe";
 export declare const image = "lm-image";
 export declare const input = "lm-input";

package/components/public-classnames.js

@@ -5,7 +5,6 @@ export const disclaimer = 'lm-disclaimer';
 export const drawer = 'lm-drawer';
 export const eventListener = 'lm-event-listener';
 export const gallery = 'lm-gallery';
-export const galleryAlt = 'lm-gallery-alt';
 export const iframe = 'lm-iframe';
 export const image = 'lm-image';
 export const input = 'lm-input';

package/node/@google-cloud/storage/file/index.d.ts

@@ -2,8 +2,8 @@ export * as copy from './copy/index.js'
 export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
-export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
+export * as getMetadata from './get-metadata/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'

package/node/@google-cloud/storage/file/index.js

@@ -2,8 +2,8 @@ export * as copy from './copy/index.js'
 export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
-export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
+export * as getMetadata from './get-metadata/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'

package/node/ftps/file/index.d.ts

@@ -1,6 +1,6 @@
-export * as download from './download/index.js'
 export * as copy from './copy/index.js'
 export * as exists from './exists/index.js'
+export * as download from './download/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'

package/node/ftps/file/index.js

@@ -1,6 +1,6 @@
-export * as download from './download/index.js'
 export * as copy from './copy/index.js'
 export * as exists from './exists/index.js'
+export * as download from './download/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'

package/node/ftps/index.d.ts

@@ -1,2 +1,2 @@
-export * as directory from './directory/index.js'
 export * as file from './file/index.js'
+export * as directory from './directory/index.js'

package/node/ftps/index.js

@@ -1,2 +1,2 @@
-export * as directory from './directory/index.js'
 export * as file from './file/index.js'
+export * as directory from './directory/index.js'

package/node/images/index.d.ts

@@ -1,5 +1,5 @@
 export * as create from './create/index.js'
-export * as metadata from './metadata/index.js'
 export * as format from './format/index.js'
+export * as metadata from './metadata/index.js'
 export * as transform from './transform/index.js'
 export * as utils from './utils/index.js'

package/node/images/index.js

@@ -1,5 +1,5 @@
 export * as create from './create/index.js'
-export * as metadata from './metadata/index.js'
 export * as format from './format/index.js'
+export * as metadata from './metadata/index.js'
 export * as transform from './transform/index.js'
 export * as utils from './utils/index.js'

package/node/images/transform/operations/index.d.ts

@@ -1,15 +1,15 @@
 export * as blur from './blur/index.js'
-export * as brighten from './brighten/index.js'
 export * as extend from './extend/index.js'
+export * as brighten from './brighten/index.js'
 export * as extract from './extract/index.js'
 export * as flatten from './flatten/index.js'
 export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
 export * as hue from './hue/index.js'
 export * as level from './level/index.js'
+export * as lighten from './lighten/index.js'
 export * as normalize from './normalize/index.js'
 export * as overlay from './overlay/index.js'
-export * as lighten from './lighten/index.js'
 export * as resize from './resize/index.js'
 export * as rotate from './rotate/index.js'
 export * as saturate from './saturate/index.js'

package/node/images/transform/operations/index.js

@@ -1,15 +1,15 @@
 export * as blur from './blur/index.js'
-export * as brighten from './brighten/index.js'
 export * as extend from './extend/index.js'
+export * as brighten from './brighten/index.js'
 export * as extract from './extract/index.js'
 export * as flatten from './flatten/index.js'
 export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
 export * as hue from './hue/index.js'
 export * as level from './level/index.js'
+export * as lighten from './lighten/index.js'
 export * as normalize from './normalize/index.js'
 export * as overlay from './overlay/index.js'
-export * as lighten from './lighten/index.js'
 export * as resize from './resize/index.js'
 export * as rotate from './rotate/index.js'
 export * as saturate from './saturate/index.js'

package/node/index.d.ts

@@ -1,8 +1,8 @@
 export * as awsS3 from './@aws-s3/index.js'
 export * as designEdito from './@design-edito/index.js'
 export * as express from './@express/index.js'
-export * as googleCloud from './@google-cloud/index.js'
 export * as cloudStorage from './cloud-storage/index.js'
+export * as googleCloud from './@google-cloud/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'
 export * as ftps from './ftps/index.js'

package/node/index.js

@@ -1,8 +1,8 @@
 export * as awsS3 from './@aws-s3/index.js'
 export * as designEdito from './@design-edito/index.js'
 export * as express from './@express/index.js'
-export * as googleCloud from './@google-cloud/index.js'
 export * as cloudStorage from './cloud-storage/index.js'
+export * as googleCloud from './@google-cloud/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'
 export * as ftps from './ftps/index.js'

package/node/process/index.d.ts

@@ -1,3 +1,3 @@
 export * as onExit from './on-exit/index.js'
-export * as spawner from './spawner/index.js'
 export * as promptContinue from './prompt-continue/index.js'
+export * as spawner from './spawner/index.js'

package/node/process/index.js

@@ -1,3 +1,3 @@
 export * as onExit from './on-exit/index.js'
-export * as spawner from './spawner/index.js'
 export * as promptContinue from './prompt-continue/index.js'
+export * as spawner from './spawner/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-edito/tools",
-  "version": "0.5.31",
+  "version": "0.5.33",
   "description": "",
   "author": "Maxime Fabas",
   "license": "ISC",
@@ -1453,13 +1453,6 @@
     "./components/Gallery/index.js": {
       "import": "./components/Gallery/index.js"
     },
-    "./components/GalleryAlt": {
-      "import": "./components/GalleryAlt/index.js",
-      "types": "./components/GalleryAlt/index.d.ts"
-    },
-    "./components/GalleryAlt/index.js": {
-      "import": "./components/GalleryAlt/index.js"
-    },
     "./components/Iframe": {
       "import": "./components/Iframe/index.js",
       "types": "./components/Iframe/index.d.ts"

package/components/GalleryAlt/index.d.ts

@@ -1,76 +0,0 @@
-import { type FunctionComponent, type PropsWithChildren, type ReactNode } from 'react';
-import type { WithClassName } from '../utils/types.js';
-/**
- * Props for the GalleryAlt component. Same shape as {@link Gallery}, so the two swap.
- *
- * @property paddingLeft - Left padding applied to the first slot. A number is pixels.
- * Falls back to `padding`, then `0px`.
- * @property paddingRight - Right padding applied to the last slot. Same rules.
- * @property padding - Shorthand for both ends, used when a side is not set.
- * @property prevButtonContent - Content of the "previous" control. Defaults to `"prev"`.
- * @property nextButtonContent - Content of the "next" control. Defaults to `"next"`.
- * @property paginationContent - Content of each pagination item: a node used for all of
- * them, a function of the page index, or undefined to show the index.
- * @property defaultActive - Slot to scroll to at mount, in uncontrolled mode.
- * @property active - Controlled index. When set, the active slot is this one and hand
- * scrolling is disabled.
- * @property noSnap - Frees the scroll from snapping to a slot.
- * @property onPrevClicked - Fires before the gallery reacts, with the index as it was.
- * @property onNextClicked - Fires before the gallery reacts, with the index as it was.
- * @property onPaginationClicked - Fires before the gallery reacts, with the index as it
- * was and the one aimed at.
- * @property onActiveSlotChanged - Fires after the active slot changed, with the new index.
- * @property onCanGoLeftChanged - Fires after the ability to scroll further left changed.
- * Never on mount.
- * @property onCanGoRightChanged - Same, to the right.
- * @property className - Added to the root element.
- * @property children - One slot per child.
- */
-export type Props = PropsWithChildren<WithClassName<{
-    paddingLeft?: string | number;
-    paddingRight?: string | number;
-    padding?: string | number;
-    prevButtonContent?: ReactNode;
-    nextButtonContent?: ReactNode;
-    paginationContent?: ReactNode | ((page: number) => ReactNode);
-    defaultActive?: number;
-    active?: number;
-    noSnap?: boolean;
-    onPrevClicked?: (activePos: number) => void;
-    onNextClicked?: (activePos: number) => void;
-    onPaginationClicked?: (activePos: number, targetPos: number) => void;
-    onActiveSlotChanged?: (activePos: number) => void;
-    onCanGoLeftChanged?: (canGoLeft: boolean) => void;
-    onCanGoRightChanged?: (canGoRight: boolean) => void;
-}>>;
-/**
- * Horizontally scrollable gallery, told apart from {@link Gallery} by how it locates the
- * active slot.
- *
- * Geometry is measured **once per layout change** into a table of scroll positions, one
- * per slot, and the boundaries between them. A scroll event then only has to place a
- * number between two others — no element is measured while the reader scrolls.
- *
- * The same table is what the controls scroll to, so reading the active slot and moving
- * to one cannot disagree, with or without snapping.
- *
- * ### CSS elements
- * - `scroller`
- * - `slot`, `slot--active`
- * - `actions`, `prev`, `next`
- * - `pagination`, `page`, `page--active`
- *
- * Root modifiers: `controlled`, `no-snap`, `measured`, `at-first`, `at-last`,
- * `can-go-left`, `can-go-right`.
- *
- * @param props - Component properties.
- * @see {@link Props}
- * @returns A container wrapping the scroller, the two controls and the pagination.
- *
- * @remarks
- * Nothing is measured while the reader scrolls: the table is rebuilt only when a box
- * changes size or a slot is added, watched through a `ResizeObserver`. Until the first
- * measurement lands, the root carries no `measured` modifier and every slot position
- * reads as `0`.
- */
-export declare const GalleryAlt: FunctionComponent<Props>;