@terraware/web-components 5.0.12 → 5.0.14

package/components/TimelineSliderV2/ClusterBadge.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from 'react';
+import './styles.scss';
+type ClusterBadgeProps = {
+    count: number;
+    leftPx: number;
+    onClose: () => void;
+};
+declare const ClusterBadge: ({ count, leftPx, onClose }: ClusterBadgeProps) => JSX.Element;
+export default ClusterBadge;
+//# sourceMappingURL=ClusterBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterBadge.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineSliderV2/ClusterBadge.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,eAAe,CAAC;AAEvB,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,YAAY,GAAI,4BAA4B,iBAAiB,KAAG,GAAG,CAAC,OASzE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/TimelineSliderV2/ClusterBadge.js

@@ -0,0 +1,29 @@
+import 'react';
+import Icon from '../Icon/Icon.js';
+import './styles.scss';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const ClusterBadge = ({
+  count,
+  leftPx,
+  onClose
+}) => {
+  return /*#__PURE__*/jsxs("div", {
+    className: "timeline-v2-cluster-badge",
+    style: {
+      left: `${leftPx}px`
+    },
+    children: [count, /*#__PURE__*/jsx("button", {
+      "aria-label": "Close cluster",
+      className: "timeline-v2-cluster-badge__close",
+      onClick: onClose,
+      type: "button",
+      children: /*#__PURE__*/jsx(Icon, {
+        name: "close",
+        size: "small"
+      })
+    })]
+  });
+};
+
+export { ClusterBadge as default };

package/components/TimelineSliderV2/TimelineDot.d.ts

@@ -0,0 +1,16 @@
+import { type JSX } from 'react';
+import './styles.scss';
+import type { ColorWeight } from './types';
+type TimelineDotProps = {
+    ariaLabel?: string;
+    colorWeights: ColorWeight[];
+    dimmed: boolean;
+    leftPx: number;
+    markCount: number;
+    onClick: () => void;
+    selected: boolean;
+    sizePx: number;
+};
+declare const TimelineDot: ({ ariaLabel, colorWeights, dimmed, leftPx, markCount, onClick, selected, sizePx, }: TimelineDotProps) => JSX.Element;
+export default TimelineDot;
+//# sourceMappingURL=TimelineDot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineDot.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineSliderV2/TimelineDot.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAW,MAAM,OAAO,CAAC;AAGjD,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,oFASlB,gBAAgB,KAAG,GAAG,CAAC,OAsBzB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/TimelineSliderV2/TimelineDot.js

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { toConicGradient } from './layout.js';
+import './styles.scss';
+import { jsx } from 'react/jsx-runtime';
+
+const TimelineDot = ({
+  ariaLabel,
+  colorWeights,
+  dimmed,
+  leftPx,
+  markCount,
+  onClick,
+  selected,
+  sizePx
+}) => {
+  const background = useMemo(() => toConicGradient(colorWeights), [colorWeights]);
+  const className = ['timeline-v2-dot', dimmed ? 'timeline-v2-dot--dimmed' : '', selected ? 'timeline-v2-dot--selected' : ''].filter(entry => entry !== '').join(' ');
+  return /*#__PURE__*/jsx("button", {
+    "aria-label": ariaLabel,
+    className: className,
+    style: {
+      background,
+      height: `${sizePx}px`,
+      left: `${leftPx}px`,
+      width: `${sizePx}px`
+    },
+    onClick: onClick,
+    type: "button",
+    children: markCount > 1 && /*#__PURE__*/jsx("span", {
+      className: "timeline-v2-dot__count",
+      children: markCount
+    })
+  });
+};
+
+export { TimelineDot as default };

package/components/TimelineSliderV2/TimelineRail.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from 'react';
+import './styles.scss';
+declare const TimelineRail: () => JSX.Element;
+export default TimelineRail;
+//# sourceMappingURL=TimelineRail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineRail.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineSliderV2/TimelineRail.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,eAAe,CAAC;AAEvB,QAAA,MAAM,YAAY,QAAO,GAAG,CAAC,OAE5B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/TimelineSliderV2/TimelineRail.js

@@ -0,0 +1,11 @@
+import 'react';
+import './styles.scss';
+import { jsx } from 'react/jsx-runtime';
+
+const TimelineRail = () => {
+  return /*#__PURE__*/jsx("div", {
+    className: "timeline-v2-rail"
+  });
+};
+
+export { TimelineRail as default };

package/components/TimelineSliderV2/index.d.ts

@@ -0,0 +1,15 @@
+import { type JSX } from 'react';
+import './styles.scss';
+import type { TimelineSliderV2Mark } from './types';
+export type { TimelineSliderV2Mark };
+export type TimelineSliderV2Props = {
+    clusterThresholdPx?: number;
+    labelEnd?: string;
+    labelStart?: string;
+    marks: TimelineSliderV2Mark[];
+    onSelect?: (markId: string) => void;
+    selectedMarkId?: string;
+};
+declare const TimelineSliderV2: ({ clusterThresholdPx, labelEnd, labelStart, marks, onSelect, selectedMarkId, }: TimelineSliderV2Props) => JSX.Element;
+export default TimelineSliderV2;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineSliderV2/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAqD,MAAM,OAAO,CAAC;AAQ3F,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,EAAgB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAElE,YAAY,EAAE,oBAAoB,EAAE,CAAC;AAErC,MAAM,MAAM,qBAAqB,GAAG;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,gBAAgB,GAAI,gFAOvB,qBAAqB,KAAG,GAAG,CAAC,OAwG9B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/components/TimelineSliderV2/index.js

@@ -0,0 +1,104 @@
+import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { useTheme } from '@mui/material';
+import ClusterBadge from './ClusterBadge.js';
+import TimelineDot from './TimelineDot.js';
+import TimelineRail from './TimelineRail.js';
+import { buildLayout, DEFAULT_CLUSTER_THRESHOLD_PX } from './layout.js';
+import './styles.scss';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+const TimelineSliderV2 = ({
+  clusterThresholdPx = DEFAULT_CLUSTER_THRESHOLD_PX,
+  labelEnd,
+  labelStart,
+  marks,
+  onSelect,
+  selectedMarkId
+}) => {
+  const theme = useTheme();
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [expandedClusterId, setExpandedClusterId] = useState();
+  useEffect(() => {
+    const node = containerRef.current;
+    if (node === null) {
+      return;
+    }
+    const measure = () => setContainerWidth(node.clientWidth);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  const layout = useMemo(() => buildLayout({
+    containerWidth,
+    expandedClusterId,
+    marks,
+    thresholdPx: clusterThresholdPx
+  }), [clusterThresholdPx, containerWidth, expandedClusterId, marks]);
+  useEffect(() => {
+    if (containerWidth > 0 && expandedClusterId !== undefined && layout.band === undefined) {
+      setExpandedClusterId(undefined);
+    }
+  }, [containerWidth, expandedClusterId, layout.band]);
+  const selectedLabel = useMemo(() => marks.find(mark => mark.id === selectedMarkId)?.label, [marks, selectedMarkId]);
+  const markNames = useMemo(() => new Map(marks.map(mark => [mark.id, mark.ariaLabel ?? mark.label])), [marks]);
+  const nodeAriaLabel = useCallback(node => {
+    const names = node.markIds.map(markId => markNames.get(markId)).filter(name => name !== undefined);
+    return names.length > 0 ? names.join(', ') : undefined;
+  }, [markNames]);
+  const handleNodeClick = useCallback(node => {
+    if (node.markIds.length > 1) {
+      setExpandedClusterId(node.id);
+    } else {
+      onSelect?.(node.markIds[0]);
+    }
+  }, [onSelect]);
+  const handleCollapse = useCallback(() => setExpandedClusterId(undefined), []);
+  return /*#__PURE__*/jsxs("div", {
+    className: "timeline-v2",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "timeline-v2-label",
+      style: {
+        marginRight: theme.spacing(2)
+      },
+      children: labelStart
+    }), /*#__PURE__*/jsxs("div", {
+      className: "timeline-v2-container",
+      ref: containerRef,
+      children: [/*#__PURE__*/jsx(TimelineRail, {}), layout.band && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: "timeline-v2-band",
+          style: {
+            left: `${layout.band.leftPx}px`,
+            width: `${layout.band.widthPx}px`
+          }
+        }), /*#__PURE__*/jsx(ClusterBadge, {
+          count: layout.band.memberCount,
+          leftPx: layout.band.leftPx + layout.band.widthPx / 2,
+          onClose: handleCollapse
+        })]
+      }), layout.nodes.map(node => /*#__PURE__*/jsx(TimelineDot, {
+        ariaLabel: nodeAriaLabel(node),
+        colorWeights: node.colorWeights,
+        dimmed: node.dimmed,
+        leftPx: node.leftPx,
+        markCount: node.markIds.length,
+        onClick: () => handleNodeClick(node),
+        selected: selectedMarkId !== undefined && node.markIds.includes(selectedMarkId),
+        sizePx: node.sizePx
+      }, node.id))]
+    }), /*#__PURE__*/jsx("div", {
+      className: "timeline-v2-label",
+      style: {
+        marginLeft: theme.spacing(2)
+      },
+      children: labelEnd
+    }), selectedLabel && /*#__PURE__*/jsx("div", {
+      className: "timeline-v2-selected-label",
+      children: selectedLabel
+    })]
+  });
+};
+
+export { TimelineSliderV2 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 };

package/components/TimelineSliderV2/styles.scss

@@ -0,0 +1,134 @@
+@use '../../style-dictionary-dist/terraware.scss';
+
+.timeline-v2 {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  width: 100%;
+}
+
+.timeline-v2-label {
+  font-family: terraware.$tw-fnt-frm-fld-label-font-family;
+  font-size: terraware.$tw-fnt-frm-fld-label-font-size;
+  font-weight: terraware.$tw-fnt-frm-fld-label-font-weight;
+  line-height: terraware.$tw-fnt-frm-fld-label-line-height;
+  color: terraware.$tw-clr-txt-secondary;
+}
+
+.timeline-v2-selected-label {
+  border-radius: 8px;
+  background: terraware.$tw-clr-bg-secondary;
+  width: 140px;
+  padding: 10px;
+  text-align: center;
+  margin-left: 12px;
+  font-family: terraware.$tw-fnt-btn-label-small-font-family;
+  font-size: terraware.$tw-fnt-btn-label-small-font-size;
+  font-weight: terraware.$tw-fnt-mssg-title-font-weight;
+  line-height: terraware.$tw-fnt-btn-label-small-line-height;
+  color: terraware.$tw-clr-base-black;
+}
+
+.timeline-v2-container {
+  width: 100%;
+  max-width: 500px;
+  margin: 0;
+  position: relative;
+  height: 40px;
+}
+
+.timeline-v2-rail {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 5px;
+  background-color: terraware.$tw-clr-base-gray-200;
+  transform: translateY(-50%);
+  z-index: 0;
+}
+
+.timeline-v2-band {
+  position: absolute;
+  top: 50%;
+  height: 24px;
+  border-radius: 12px;
+  background-color: terraware.$tw-clr-base-gray-200;
+  transform: translateY(-50%);
+  transition:
+    left 200ms ease,
+    width 200ms ease;
+  z-index: 1;
+}
+
+.timeline-v2-dot {
+  position: absolute;
+  top: 50%;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 0;
+  border: none;
+  appearance: none;
+  background: none;
+  transform: translate(-50%, -50%);
+  transition:
+    left 200ms ease,
+    width 200ms ease,
+    height 200ms ease,
+    opacity 200ms ease;
+  z-index: 2;
+
+  &--dimmed {
+    opacity: 0.35;
+  }
+
+  &--selected::after {
+    content: '';
+    position: absolute;
+    inset: -4px;
+    border: 2px solid terraware.$tw-clr-base-black;
+    border-radius: 50%;
+  }
+
+  &__count {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    font-family: terraware.$tw-fnt-frm-fld-label-font-family;
+    font-size: terraware.$tw-fnt-frm-fld-label-font-size;
+    font-weight: terraware.$tw-fnt-frm-fld-label-font-weight;
+    line-height: terraware.$tw-fnt-frm-fld-label-line-height;
+    color: terraware.$tw-clr-txt-secondary;
+  }
+}
+
+.timeline-v2-cluster-badge {
+  position: absolute;
+  bottom: calc(50% + 20px);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px 2px 8px;
+  border-radius: 4px;
+  background: terraware.$tw-clr-bg-secondary;
+  transform: translateX(-50%);
+  font-family: terraware.$tw-fnt-frm-fld-label-font-family;
+  font-size: terraware.$tw-fnt-frm-fld-label-font-size;
+  font-weight: terraware.$tw-fnt-mssg-title-font-weight;
+  line-height: terraware.$tw-fnt-frm-fld-label-line-height;
+  color: terraware.$tw-clr-base-black;
+  z-index: 3;
+
+  &__close {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    border: none;
+    background: none;
+    appearance: none;
+    cursor: pointer;
+  }
+}

package/components/TimelineSliderV2/types.d.ts

@@ -0,0 +1,50 @@
+export type TimelineSliderV2Mark = {
+    ariaLabel?: string;
+    color: string;
+    id: string;
+    label?: string;
+    value: number;
+};
+export type LayoutMark = {
+    color: string;
+    id: string;
+    value: number;
+};
+export type ColorWeight = {
+    color: string;
+    weight: number;
+};
+export type PositionedMark = {
+    color: string;
+    id: string;
+    positionPx: number;
+};
+export type TimelineCluster = {
+    anchorPx: number;
+    id: string;
+    members: PositionedMark[];
+};
+export type TimelineNode = {
+    colorWeights: ColorWeight[];
+    dimmed: boolean;
+    id: string;
+    leftPx: number;
+    markIds: string[];
+    sizePx: number;
+};
+export type ExpandedBand = {
+    leftPx: number;
+    memberCount: number;
+    widthPx: number;
+};
+export type TimelineLayout = {
+    band?: ExpandedBand;
+    nodes: TimelineNode[];
+};
+export type BuildLayoutParams = {
+    containerWidth: number;
+    expandedClusterId?: string;
+    marks: LayoutMark[];
+    thresholdPx?: number;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineSliderV2/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/components/TimelineSliderV2/types.js

@@ -0,0 +1 @@
+

package/index.d.ts

@@ -45,6 +45,7 @@ import Tabs from './components/Tabs';
 import TextTruncated from './components/TextTruncated';
 import Textfield from './components/Textfield/Textfield';
 import TimelineSlider from './components/TimelineSlider';
+import TimelineSliderV2 from './components/TimelineSliderV2';
 import Tooltip from './components/Tooltip/Tooltip';
 import ViewPhotosDialog from './components/ViewPhotosDialog';
 import * as Svg from './components/svg';
@@ -73,5 +74,5 @@ export type { DatePickerDateType, Props as DatePickerProps } from './components/
 export type { DateType } from './utils/date';
 export type { ComponentStrings } from './strings';
 export type { LocaleDetails } from './strings/locales';
-export { AntSwitch, Autocomplete, Badge, BusySpinner, Button, CellRenderer, CellDateRenderer, Checkbox, Confirm, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, DropdownV1, EditableTable, ErrorBox, FileChooser, findLocaleDetails, FormBottomBar, getComparator, getLocale, getStrings, getSupportedLocales, icons, Icon, IconTooltip, MapComponent, Message, MultiSelect, NavFooter, NavItem, NavSection, Navbar, Note, OverlayModal, PageForm, Pill, PillList, PhotoChooser, PhotosCarousel, PlacementWrapper, Popover, PopoverMenu, PopoverMultiSelect, ProgressCircle, RadioButton, Select, SelectT, Separator, setLocale, Slider, stableSort, SummaryBox, supportedLocales, Svg, Table, Tabs, Textfield, TextTruncated, TimelineSlider, theme, Tooltip, useStrings, ViewPhotosDialog, };
+export { AntSwitch, Autocomplete, Badge, BusySpinner, Button, CellRenderer, CellDateRenderer, Checkbox, Confirm, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, DropdownV1, EditableTable, ErrorBox, FileChooser, findLocaleDetails, FormBottomBar, getComparator, getLocale, getStrings, getSupportedLocales, icons, Icon, IconTooltip, MapComponent, Message, MultiSelect, NavFooter, NavItem, NavSection, Navbar, Note, OverlayModal, PageForm, Pill, PillList, PhotoChooser, PhotosCarousel, PlacementWrapper, Popover, PopoverMenu, PopoverMultiSelect, ProgressCircle, RadioButton, Select, SelectT, Separator, setLocale, Slider, stableSort, SummaryBox, supportedLocales, Svg, Table, Tabs, Textfield, TextTruncated, TimelineSlider, TimelineSliderV2, theme, Tooltip, useStrings, ViewPhotosDialog, };
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -45,6 +45,7 @@ export { default as Tabs } from './components/Tabs/index.js';
 export { default as TextTruncated } from './components/TextTruncated/index.js';
 export { default as Textfield } from './components/Textfield/Textfield.js';
 export { default as TimelineSlider } from './components/TimelineSlider/index.js';
+export { default as TimelineSliderV2 } from './components/TimelineSliderV2/index.js';
 export { default as Tooltip } from './components/Tooltip/Tooltip.js';
 export { default as ViewPhotosDialog } from './components/ViewPhotosDialog/index.js';
 import * as index from './components/svg/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "5.0.12",
+  "version": "5.0.14",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {