@terraware/web-components 5.0.11 → 5.0.13

package/components/PhotosCarousel/PhotoSlide.d.ts

@@ -0,0 +1,10 @@
+import type { PhotoItem } from './index';
+interface PhotoSlideProps {
+    photo: PhotoItem;
+    index: number;
+    total: number;
+    selected: boolean;
+}
+declare const PhotoSlide: ({ photo, index, total, selected }: PhotoSlideProps) => import("react/jsx-runtime").JSX.Element;
+export default PhotoSlide;
+//# sourceMappingURL=PhotoSlide.d.ts.map

package/components/PhotosCarousel/PhotoSlide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhotoSlide.d.ts","sourceRoot":"","sources":["../../../src/components/PhotosCarousel/PhotoSlide.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,UAAU,GAAI,mCAAmC,eAAe,4CAkBrE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/PhotosCarousel/PhotoSlide.js

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import BusySpinner from '../BusySpinner/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const PhotoSlide = ({
+  photo,
+  index,
+  total,
+  selected
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const finishLoading = () => setIsLoading(false);
+  return /*#__PURE__*/jsxs("div", {
+    className: "embla__slide",
+    role: "group",
+    "aria-roledescription": "slide",
+    "aria-label": `${index + 1} of ${total}`,
+    children: [isLoading && /*#__PURE__*/jsx(BusySpinner, {
+      noBackground: true
+    }), /*#__PURE__*/jsx("a", {
+      href: photo.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      tabIndex: selected ? 0 : -1,
+      children: /*#__PURE__*/jsx("img", {
+        className: "embla__slide__img",
+        src: photo.url,
+        alt: photo.alt,
+        onLoad: finishLoading,
+        onError: finishLoading
+      })
+    })]
+  });
+};
+
+export { PhotoSlide as default };

package/components/PhotosCarousel/index.d.ts

@@ -1,5 +1,4 @@
 import React, { type JSX } from 'react';
-import 'react-multi-carousel/lib/styles.css';
 import './styles.scss';
 export type PhotoItem = {
     url: string;
@@ -14,5 +13,6 @@ export interface PhotosCarouselProps {
     numbered?: boolean;
     dots?: boolean;
 }
-export default function PhotosCarousel(props: PhotosCarouselProps): JSX.Element;
+declare const PhotosCarousel: (props: PhotosCarouselProps) => JSX.Element;
+export default PhotosCarousel;
 //# sourceMappingURL=index.d.ts.map

package/components/PhotosCarousel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhotosCarousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAA4C,MAAM,OAAO,CAAC;AAElF,OAAO,qCAAqC,CAAC;AAK7C,OAAO,eAAe,CAAC;AAUvB,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AASD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAsE9E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhotosCarousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAMxC,OAAO,eAAe,CAAC;AAGvB,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,QAAA,MAAM,cAAc,GAAI,OAAO,mBAAmB,KAAG,GAAG,CAAC,OAyExD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/PhotosCarousel/index.js

@@ -1,97 +1,86 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
-import CarouselImport from '../../_virtual/index.js';
-import 'react-multi-carousel/lib/styles.css';
+import 'react';
 import { Box, Typography } from '@mui/material';
-import BusySpinner from '../BusySpinner/index.js';
+import Icon from '../Icon/Icon.js';
+import PhotoSlide from './PhotoSlide.js';
 import './styles.scss';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import usePhotosCarousel from './usePhotosCarousel.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-const Carousel = CarouselImport.default ?? CarouselImport;
-const responsive = {
-  mobile: {
-    breakpoint: {
-      max: 4000,
-      min: 0
-    },
-    items: 1
-  }
-};
-function PhotosCarousel(props) {
+const PhotosCarousel = props => {
   const {
     photos,
-    selectedSlide,
-    onSlideChange,
-    showArrows,
+    showArrows = false,
     numbered,
-    dots
+    dots = true
   } = props;
-  const isControlled = selectedSlide !== undefined;
-  const [internalSlide, setInternalSlide] = useState(0);
-  const [isLoading, setIsLoading] = useState([]);
-  const myCarousel = useRef(null);
-  const currentSlide = isControlled ? selectedSlide : internalSlide;
-
-  // Keyed on the URLs (not just photos.length) so swapping in a same-length array of
-  // different photos still resets the loading state instead of leaving stale flags.
-  const photoKey = photos.map(p => p.url).join('|');
-  useEffect(() => {
-    setIsLoading(new Array(photos.length).fill(true));
-  }, [photoKey]);
-  useEffect(() => {
-    if (myCarousel.current && myCarousel.current.state.currentSlide !== currentSlide) {
-      myCarousel.current.goToSlide(currentSlide);
-    }
-  }, [currentSlide]);
-  const handleAfterChange = useCallback(() => {
-    const slide = myCarousel.current?.state.currentSlide ?? 0;
-    if (!isControlled) {
-      setInternalSlide(slide);
-    }
-    if (slide !== currentSlide) {
-      onSlideChange?.(slide);
-    }
-  }, [isControlled, currentSlide, onSlideChange]);
-  const finishLoading = index => {
-    setIsLoading(prev => {
-      const next = [...prev];
-      next[index] = false;
-      return next;
-    });
-  };
+  const {
+    emblaRef,
+    currentSlide,
+    scrollSnaps,
+    prevButtonDisabled,
+    nextButtonDisabled,
+    scrollPrev,
+    scrollNext,
+    scrollTo,
+    onKeyDown
+  } = usePhotosCarousel(props);
   return /*#__PURE__*/jsxs(Box, {
-    sx: {
-      '& .react-multi-carousel-list': {
-        paddingBottom: '20px'
-      }
-    },
-    children: [/*#__PURE__*/jsx(Carousel, {
-      responsive: responsive,
-      ref: myCarousel,
-      showDots: dots ?? true,
-      arrows: showArrows ?? false,
-      ssr: true,
-      afterChange: handleAfterChange,
-      children: photos.map((p, i) => /*#__PURE__*/jsxs("div", {
-        className: "photos-carousel-container",
-        children: [isLoading[i] ? /*#__PURE__*/jsx(BusySpinner, {
-          noBackground: true
-        }) : undefined, /*#__PURE__*/jsx("a", {
-          href: p.url,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: /*#__PURE__*/jsx("img", {
-            className: "photos-carousel-image",
-            src: p.url,
-            alt: p.alt,
-            onLoad: () => finishLoading(i)
+    className: "photos-carousel",
+    role: "region",
+    "aria-roledescription": "carousel",
+    "aria-label": "Photos",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "embla",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "embla__viewport",
+        ref: emblaRef,
+        onKeyDown: onKeyDown,
+        children: /*#__PURE__*/jsx("div", {
+          className: "embla__container",
+          children: photos.map((photo, index) => /*#__PURE__*/jsx(PhotoSlide, {
+            photo: photo,
+            index: index,
+            total: photos.length,
+            selected: index === currentSlide
+          }, `${photo.url}-${index}`))
+        })
+      }), showArrows && photos.length > 1 && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("button", {
+          type: "button",
+          className: "embla__prev",
+          "aria-label": "Previous photo",
+          disabled: prevButtonDisabled,
+          onClick: scrollPrev,
+          children: /*#__PURE__*/jsx(Icon, {
+            name: "caretLeft",
+            fillColor: "currentColor"
+          })
+        }), /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: "embla__next",
+          "aria-label": "Next photo",
+          disabled: nextButtonDisabled,
+          onClick: scrollNext,
+          children: /*#__PURE__*/jsx(Icon, {
+            name: "caretRight",
+            fillColor: "currentColor"
           })
         })]
-      }, `photo-${i}-container`))
-    }), numbered ? /*#__PURE__*/jsx(Typography, {
+      }), dots && /*#__PURE__*/jsx("div", {
+        className: "embla__dots",
+        children: scrollSnaps.map((_, index) => /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: `embla__dot${index === currentSlide ? ' embla__dot--selected' : ''}`,
+          "aria-label": `Go to photo ${index + 1}`,
+          "aria-current": index === currentSlide ? 'true' : undefined,
+          onClick: () => scrollTo(index)
+        }, index))
+      })]
+    }), numbered && /*#__PURE__*/jsx(Typography, {
       className: "photo-numbering",
-      children: `${currentSlide + 1}/${photos.length}`
-    }) : undefined, photos[currentSlide] && photos[currentSlide].decoration]
+      children: `${photos.length ? currentSlide + 1 : 0}/${photos.length}`
+    }), photos[currentSlide]?.decoration]
   });
-}
+};
 
 export { PhotosCarousel as default };

package/components/PhotosCarousel/styles.scss

@@ -1,18 +1,105 @@
 @use '../../style-dictionary-dist/terraware.scss';
 
-.photos-carousel-container {
-  min-height: 200px;
-  background: terraware.$tw-clr-bg;
-}
+.photos-carousel {
+  --arrow-size: 43px;
+  --control-spacing: 20px;
+  --arrow-inset: calc(4% + 1px);
+  text-align: center;
+  .embla {
+    position: relative;
+    padding-bottom: var(--control-spacing);
+  }
 
-.photos-carousel-image {
-  object-fit: contain;
-  margin: auto;
-  height: 400px;
-  width: 100%;
-}
+  .embla__viewport {
+    overflow: hidden;
+  }
+
+  .embla__container {
+    display: flex;
+    touch-action: pan-y pinch-zoom;
+  }
+
+  .embla__slide {
+    flex: 0 0 100%;
+    min-width: 0;
+    position: relative;
+    min-height: 200px;
+    background: terraware.$tw-clr-bg;
+  }
+
+  .embla__slide__img {
+    object-fit: contain;
+    margin: auto;
+    height: 400px;
+    width: 100%;
+  }
+
+  .embla__prev,
+  .embla__next {
+    position: absolute;
+    top: calc((100% - var(--control-spacing)) / 2);
+    transform: translateY(-50%);
+    width: var(--arrow-size);
+    height: var(--arrow-size);
+    border: 0;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    .tw-icon {
+      stroke: currentColor;
+      stroke-width: 1;
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.8);
+    }
+
+    &:disabled {
+      visibility: hidden;
+    }
+  }
+
+  .embla__prev {
+    left: var(--arrow-inset);
+  }
+
+  .embla__next {
+    right: var(--arrow-inset);
+  }
+
+  .embla__dots {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 6px;
+  }
+
+  .embla__dot {
+    width: 12px;
+    height: 12px;
+    padding: 0;
+    margin: 0;
+    border: 2px solid grey;
+    border-radius: 50%;
+    background: white;
+    cursor: pointer;
+
+    &--selected,
+    &:hover {
+      background: #080808;
+    }
+  }
 
-.photo-numbering {
-  font-size: 12px;
-  color: terraware.$tw-clr-txt-info;
+  .photo-numbering {
+    font-size: 12px;
+    color: terraware.$tw-clr-txt-info;
+  }
 }

package/components/PhotosCarousel/usePhotosCarousel.d.ts

@@ -0,0 +1,15 @@
+import { type KeyboardEvent } from 'react';
+import type { PhotosCarouselProps } from './index';
+declare const usePhotosCarousel: ({ photos, selectedSlide, onSlideChange, }: Pick<PhotosCarouselProps, "photos" | "selectedSlide" | "onSlideChange">) => {
+    emblaRef: import("embla-carousel-react").EmblaViewportRefType;
+    currentSlide: number;
+    scrollSnaps: number[];
+    prevButtonDisabled: boolean;
+    nextButtonDisabled: boolean;
+    scrollPrev: () => void | undefined;
+    scrollNext: () => void | undefined;
+    scrollTo: (index: number) => void | undefined;
+    onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+};
+export default usePhotosCarousel;
+//# sourceMappingURL=usePhotosCarousel.d.ts.map

package/components/PhotosCarousel/usePhotosCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePhotosCarousel.d.ts","sourceRoot":"","sources":["../../../src/components/PhotosCarousel/usePhotosCarousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAuB,MAAM,OAAO,CAAC;AAIhE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,QAAA,MAAM,iBAAiB,GAAI,2CAIxB,IAAI,CAAC,mBAAmB,EAAE,QAAQ,GAAG,eAAe,GAAG,eAAe,CAAC;;;;;;;;sBAY/C,MAAM;uBAsCL,aAAa,CAAC,cAAc,CAAC;CAsBxD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/PhotosCarousel/usePhotosCarousel.js

@@ -0,0 +1,79 @@
+import { useState, useEffect } from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+
+const usePhotosCarousel = ({
+  photos,
+  selectedSlide,
+  onSlideChange
+}) => {
+  const [internalSlide, setInternalSlide] = useState(0);
+  const currentSlide = Math.max(0, Math.min(selectedSlide ?? internalSlide, photos.length - 1));
+  const [startIndex] = useState(currentSlide);
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: false,
+    startIndex
+  });
+  const [scrollSnaps, setScrollSnaps] = useState([]);
+  const [prevButtonDisabled, setPrevButtonDisabled] = useState(true);
+  const [nextButtonDisabled, setNextButtonDisabled] = useState(true);
+  const photoKey = JSON.stringify(photos.map(photo => photo.url));
+  const scrollPrev = () => emblaApi?.scrollPrev();
+  const scrollNext = () => emblaApi?.scrollNext();
+  const scrollTo = index => emblaApi?.scrollTo(index);
+  useEffect(() => {
+    emblaApi?.reInit();
+  }, [emblaApi, photoKey]);
+  useEffect(() => {
+    if (!emblaApi) {
+      return;
+    }
+    // Synchronize external selection before subscribing so it does not echo a change callback.
+    if (emblaApi.selectedScrollSnap() !== currentSlide) {
+      emblaApi.scrollTo(currentSlide);
+    }
+    const updateControls = () => {
+      setPrevButtonDisabled(!emblaApi.canScrollPrev());
+      setNextButtonDisabled(!emblaApi.canScrollNext());
+    };
+    const handleInit = () => {
+      setScrollSnaps(emblaApi.scrollSnapList());
+      updateControls();
+    };
+    const handleSelect = () => {
+      updateControls();
+      const slide = emblaApi.selectedScrollSnap();
+      setInternalSlide(slide);
+      if (slide !== currentSlide) {
+        onSlideChange?.(slide);
+      }
+    };
+    handleInit();
+    emblaApi.on('select', handleSelect).on('reInit', handleInit);
+    return () => {
+      emblaApi.off('select', handleSelect).off('reInit', handleInit);
+    };
+  }, [emblaApi, currentSlide, onSlideChange, photoKey]);
+  const onKeyDown = event => {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.preventDefault();
+      if (event.key === 'ArrowLeft') {
+        scrollPrev();
+      } else {
+        scrollNext();
+      }
+    }
+  };
+  return {
+    emblaRef,
+    currentSlide,
+    scrollSnaps,
+    prevButtonDisabled,
+    nextButtonDisabled,
+    scrollPrev,
+    scrollNext,
+    scrollTo,
+    onKeyDown
+  };
+};
+
+export { usePhotosCarousel as default };

package/components/TimelineSliderV2/layout.d.ts

@@ -0,0 +1,16 @@
+import type { BuildLayoutParams, ColorWeight, LayoutMark, PositionedMark, TimelineCluster, TimelineLayout } from './types';
+export declare const DOT_SIZE_PX = 12;
+export declare const CLUSTER_DOT_SIZE_PX = 18;
+export declare const EXPANDED_SPACING_PX = 20;
+export declare const MIN_SQUEEZE_PITCH_PX = 12;
+export declare const BAND_PADDING_PX = 8;
+export declare const SQUEEZE_GAP_PX = 12;
+export declare const MAX_BAND_RATIO = 0.8;
+export declare const DEFAULT_CLUSTER_THRESHOLD_PX = 16;
+export declare const DIMMED_OPACITY = 0.35;
+export declare const normalizePositions: (marks: LayoutMark[], containerWidth: number) => PositionedMark[];
+export declare const toColorWeights: (colors: string[]) => ColorWeight[];
+export declare const buildClusters: (marks: LayoutMark[], containerWidth: number, thresholdPx: number) => TimelineCluster[];
+export declare const toConicGradient: (colorWeights: ColorWeight[]) => string;
+export declare const buildLayout: ({ containerWidth, expandedClusterId, marks, thresholdPx, }: BuildLayoutParams) => TimelineLayout;
+//# sourceMappingURL=layout.d.ts.map

package/components/TimelineSliderV2/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineSliderV2/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,cAAc,EACd,eAAe,EACf,cAAc,EAEf,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,oBAAoB,KAAc,CAAC;AAChD,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAC/C,eAAO,MAAM,cAAc,OAAO,CAAC;AAEnC,eAAO,MAAM,kBAAkB,GAAI,OAAO,UAAU,EAAE,EAAE,gBAAgB,MAAM,KAAG,cAAc,EAkB9F,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,EAAE,KAAG,WAAW,EAQ5D,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,UAAU,EAAE,EAAE,gBAAgB,MAAM,EAAE,aAAa,MAAM,KAAG,eAAe,EAkC/G,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,cAAc,WAAW,EAAE,KAAG,MAiB7D,CAAC;AAkCF,eAAO,MAAM,WAAW,GAAI,4DAKzB,iBAAiB,KAAG,cAyDtB,CAAC"}

package/components/TimelineSliderV2/layout.js

@@ -0,0 +1,168 @@
+const DOT_SIZE_PX = 12;
+const CLUSTER_DOT_SIZE_PX = 18;
+const EXPANDED_SPACING_PX = 20;
+const MIN_SQUEEZE_PITCH_PX = DOT_SIZE_PX;
+const BAND_PADDING_PX = 8;
+const SQUEEZE_GAP_PX = 12;
+const MAX_BAND_RATIO = 0.8;
+const DEFAULT_CLUSTER_THRESHOLD_PX = 16;
+const DIMMED_OPACITY = 0.35;
+const normalizePositions = (marks, containerWidth) => {
+  if (marks.length === 0) {
+    return [];
+  }
+  const values = marks.map(mark => mark.value);
+  const minValue = Math.min(...values);
+  const maxValue = Math.max(...values);
+  const range = maxValue - minValue;
+
+  // Mirrors TimelineSlider's behavior: when every mark shares one value, they all land at the right edge.
+  return marks.map(mark => ({
+    color: mark.color,
+    id: mark.id,
+    positionPx: (range === 0 ? 1 : (mark.value - minValue) / range) * containerWidth
+  })).sort((a, b) => a.positionPx - b.positionPx);
+};
+const toColorWeights = colors => {
+  const weights = new Map();
+  colors.forEach(color => {
+    weights.set(color, (weights.get(color) ?? 0) + 1);
+  });
+  return [...weights.entries()].map(([color, weight]) => ({
+    color,
+    weight
+  }));
+};
+const buildClusters = (marks, containerWidth, thresholdPx) => {
+  const positioned = normalizePositions(marks, containerWidth);
+  const clusters = [];
+  let current = [];
+  const flush = () => {
+    if (current.length === 0) {
+      return;
+    }
+    const total = current.reduce((sum, member) => sum + member.positionPx, 0);
+    clusters.push({
+      anchorPx: total / current.length,
+      id: `cluster-${current[0].id}`,
+      members: current
+    });
+    current = [];
+  };
+  positioned.forEach(mark => {
+    const previous = current[current.length - 1];
+    if (previous !== undefined && mark.positionPx - previous.positionPx >= thresholdPx) {
+      flush();
+    }
+    current.push(mark);
+  });
+  flush();
+  return clusters;
+};
+const toConicGradient = colorWeights => {
+  if (colorWeights.length <= 1) {
+    return colorWeights[0]?.color ?? 'transparent';
+  }
+  const total = colorWeights.reduce((sum, {
+    weight
+  }) => sum + weight, 0);
+  let consumed = 0;
+  const stops = colorWeights.map(({
+    color,
+    weight
+  }) => {
+    const startDeg = consumed / total * 360;
+    consumed += weight;
+    const endDeg = consumed / total * 360;
+    return `${color} ${startDeg}deg ${endDeg}deg`;
+  });
+  return `conic-gradient(${stops.join(', ')})`;
+};
+const toCollapsedNode = (cluster, dimmed) => ({
+  colorWeights: toColorWeights(cluster.members.map(member => member.color)),
+  dimmed,
+  id: cluster.id,
+  leftPx: cluster.anchorPx,
+  markIds: cluster.members.map(member => member.id),
+  sizePx: cluster.members.length > 1 ? CLUSTER_DOT_SIZE_PX : DOT_SIZE_PX
+});
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const expandedSpacing = (memberCount, containerWidth, maxBandWidth) => {
+  if (memberCount <= 1) {
+    return EXPANDED_SPACING_PX;
+  }
+  const cap = Math.min(containerWidth * MAX_BAND_RATIO, maxBandWidth);
+  const fitted = (cap - DOT_SIZE_PX - 2 * BAND_PADDING_PX) / (memberCount - 1);
+  return Math.max(0, Math.min(EXPANDED_SPACING_PX, fitted));
+};
+const rescale = (value, fromStart, fromEnd, toStart, toEnd) => {
+  const fromSpan = fromEnd - fromStart;
+  if (fromSpan <= 0) {
+    return toStart;
+  }
+  return toStart + (value - fromStart) / fromSpan * (toEnd - toStart);
+};
+const buildLayout = ({
+  containerWidth,
+  expandedClusterId,
+  marks,
+  thresholdPx = DEFAULT_CLUSTER_THRESHOLD_PX
+}) => {
+  if (containerWidth <= 0 || marks.length === 0) {
+    return {
+      nodes: []
+    };
+  }
+  const clusters = buildClusters(marks, containerWidth, thresholdPx);
+  const expanded = clusters.find(cluster => cluster.id === expandedClusterId && cluster.members.length > 1);
+  if (expanded === undefined) {
+    return {
+      nodes: clusters.map(cluster => toCollapsedNode(cluster, false))
+    };
+  }
+  const sideClusters = clusters.filter(cluster => cluster.id !== expanded.id);
+  const leftCount = sideClusters.filter(cluster => cluster.anchorPx < expanded.anchorPx).length;
+  const rightCount = sideClusters.length - leftCount;
+  const reserve = count => count === 0 ? 0 : SQUEEZE_GAP_PX + (count - 1) * MIN_SQUEEZE_PITCH_PX;
+  const leftReserve = reserve(leftCount);
+  const rightReserve = reserve(rightCount);
+  const minBandWidth = DOT_SIZE_PX + 2 * BAND_PADDING_PX;
+  const maxBandWidth = Math.max(minBandWidth, containerWidth - leftReserve - rightReserve);
+  const spacing = expandedSpacing(expanded.members.length, containerWidth, maxBandWidth);
+  const widthPx = Math.min(maxBandWidth, (expanded.members.length - 1) * spacing + minBandWidth);
+  const leftPx = clamp(expanded.anchorPx - widthPx / 2, leftReserve, Math.max(leftReserve, containerWidth - widthPx - rightReserve));
+  const band = {
+    leftPx,
+    memberCount: expanded.members.length,
+    widthPx
+  };
+  const leftLimit = Math.max(0, leftPx - SQUEEZE_GAP_PX);
+  const rightLimit = Math.min(containerWidth, leftPx + widthPx + SQUEEZE_GAP_PX);
+  const nodes = clusters.flatMap(cluster => {
+    if (cluster.id === expanded.id) {
+      return cluster.members.map((member, index) => ({
+        colorWeights: [{
+          color: member.color,
+          weight: 1
+        }],
+        dimmed: false,
+        id: member.id,
+        leftPx: leftPx + BAND_PADDING_PX + DOT_SIZE_PX / 2 + index * spacing,
+        markIds: [member.id],
+        sizePx: DOT_SIZE_PX
+      }));
+    }
+    const collapsed = toCollapsedNode(cluster, true);
+    const squeezed = cluster.anchorPx < expanded.anchorPx ? rescale(cluster.anchorPx, 0, expanded.anchorPx, 0, leftLimit) : rescale(cluster.anchorPx, expanded.anchorPx, containerWidth, rightLimit, containerWidth);
+    return [{
+      ...collapsed,
+      leftPx: squeezed
+    }];
+  });
+  return {
+    band,
+    nodes
+  };
+};
+
+export { BAND_PADDING_PX, CLUSTER_DOT_SIZE_PX, DEFAULT_CLUSTER_THRESHOLD_PX, DIMMED_OPACITY, DOT_SIZE_PX, EXPANDED_SPACING_PX, MAX_BAND_RATIO, MIN_SQUEEZE_PITCH_PX, SQUEEZE_GAP_PX, buildClusters, buildLayout, normalizePositions, toColorWeights, toConicGradient };