@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Exotics/Mosaic/Mosaic.js

@@ -0,0 +1,105 @@
+import { ElementObserver } from "../../Abstracts/ElementObserver/ElementObserver.js";
+import { access } from "../../Utils/propUtils.js";
+import { MosaicUtils } from "./Mosaic.utils.js";
+import { mosaicItem, mosaicRoot, mosaicSizedItem } from "./Mosaic.css.js";
+import { For, createMemo, createSignal } from "solid-js";
+import { classList, className, createComponent, effect, insert, setStyleProperty, template, use } from "solid-js/web";
+//#region src/Exotics/Mosaic/Mosaic.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var DEFAULT_MOSAIC_SIZE_ANCHOR = "width";
+var DEFAULT_MOSAIC_GAP = 0;
+var EMPTY_RECT = {
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0
+};
+var EMPTY_LAYOUT = {
+	placements: [],
+	freeExtent: 0
+};
+var isSameOrder = (prev, next) => prev.length === next.length && prev.every((index, at) => index === next[at]);
+var Mosaic = (props) => {
+	const getSizeAnchor = createMemo(() => access(props.sizeAnchor) ?? DEFAULT_MOSAIC_SIZE_ANCHOR);
+	const getGap = createMemo(() => access(props.gap) ?? DEFAULT_MOSAIC_GAP);
+	const [getRootRef, setRootRef] = createSignal();
+	const getRootSize = ElementObserver.createBorderBoxSizeObserver(getRootRef);
+	const getAnchoredExtent = createMemo(() => getSizeAnchor() === "width" ? getRootSize().width : getRootSize().height);
+	const getLayout = createMemo(() => {
+		const sizes = access(props.sizes);
+		const anchoredExtent = getAnchoredExtent();
+		if (anchoredExtent <= 0 || !sizes.length) return EMPTY_LAYOUT;
+		const isTransposed = getSizeAnchor() === "height";
+		const packed = MosaicUtils.sortIntoReadingOrder(props.computePlacements({
+			sizes: isTransposed ? sizes.map(MosaicUtils.transposeSize) : sizes,
+			anchoredExtent,
+			gap: getGap()
+		}));
+		return {
+			placements: isTransposed ? packed.map(MosaicUtils.transposePlacement) : packed,
+			freeExtent: MosaicUtils.getFreeExtent(packed)
+		};
+	});
+	const getRectByIndex = createMemo(() => new Map(getLayout().placements.map((placement) => [placement.index, placement])));
+	const getOrder = createMemo(() => {
+		const placed = getLayout().placements.map((placement) => placement.index);
+		const isPlaced = new Set(placed);
+		return [...placed, ...access(props.sizes).flatMap((_, index) => isPlaced.has(index) ? [] : [index])];
+	}, void 0, { equals: isSameOrder });
+	return (() => {
+		var _el$ = _tmpl$();
+		use(setRootRef, _el$);
+		className(_el$, mosaicRoot);
+		insert(_el$, createComponent(For, {
+			get each() {
+				return getOrder();
+			},
+			children: (index, getReadingIndex) => {
+				const getIsPlaced = createMemo(() => getRectByIndex().has(index));
+				const getRect = createMemo(() => getRectByIndex().get(index) ?? EMPTY_RECT);
+				return (() => {
+					var _el$2 = _tmpl$();
+					className(_el$2, mosaicItem);
+					insert(_el$2, () => props.renderItem(index, () => ({
+						index,
+						readingIndex: getReadingIndex(),
+						itemCount: access(props.sizes).length,
+						rect: getRect()
+					})));
+					effect((_p$) => {
+						var _v$3 = { [mosaicSizedItem]: access(props.isItemSized) }, _v$4 = `${getRect().x}px`, _v$5 = `${getRect().y}px`, _v$6 = access(props.isItemSized) ? `${getRect().width}px` : void 0, _v$7 = access(props.isItemSized) ? `${getRect().height}px` : void 0, _v$8 = getIsPlaced() ? void 0 : "hidden";
+						_p$.e = classList(_el$2, _v$3, _p$.e);
+						_v$4 !== _p$.t && setStyleProperty(_el$2, "left", _p$.t = _v$4);
+						_v$5 !== _p$.a && setStyleProperty(_el$2, "top", _p$.a = _v$5);
+						_v$6 !== _p$.o && setStyleProperty(_el$2, "width", _p$.o = _v$6);
+						_v$7 !== _p$.i && setStyleProperty(_el$2, "height", _p$.i = _v$7);
+						_v$8 !== _p$.n && setStyleProperty(_el$2, "visibility", _p$.n = _v$8);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0,
+						n: void 0
+					});
+					return _el$2;
+				})();
+			}
+		}));
+		effect((_p$) => {
+			var _v$ = getSizeAnchor() === "width" ? "100%" : `${getLayout().freeExtent}px`, _v$2 = getSizeAnchor() === "height" ? "100%" : `${getLayout().freeExtent}px`;
+			_v$ !== _p$.e && setStyleProperty(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$, "height", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+};
+//#endregion
+export { Mosaic };
+
+//# sourceMappingURL=Mosaic.js.map

package/dist/Exotics/Mosaic/Mosaic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mosaic.js","names":["For","createMemo","createSignal","Rect","ElementObserver","access","MosaicPlacement","MosaicProps","MosaicSizeAnchor","MosaicUtils","styles","DEFAULT_MOSAIC_SIZE_ANCHOR","DEFAULT_MOSAIC_GAP","EMPTY_RECT","x","y","width","height","EMPTY_LAYOUT","placements","freeExtent","isSameOrder","prev","next","length","every","index","at","Mosaic","props","getSizeAnchor","sizeAnchor","getGap","gap","getRootRef","setRootRef","HTMLElement","getRootSize","createBorderBoxSizeObserver","getAnchoredExtent","getLayout","sizes","anchoredExtent","isTransposed","packed","sortIntoReadingOrder","computePlacements","map","transposeSize","transposePlacement","getFreeExtent","getRectByIndex","Map","placement","getOrder","placed","isPlaced","Set","flatMap","_","has","undefined","equals","_el$","_tmpl$","_$use","_$className","mosaicRoot","_$insert","_$createComponent","each","children","getReadingIndex","getIsPlaced","getRect","get","_el$2","mosaicItem","renderItem","readingIndex","itemCount","rect","_$effect","_p$","_v$3","mosaicSizedItem","isItemSized","_v$4","_v$5","_v$6","_v$7","_v$8","e","_$classList","t","_$setStyleProperty","a","o","i","n","_v$","_v$2"],"sources":["../../../src/Exotics/Mosaic/Mosaic.tsx"],"sourcesContent":["import { For, createMemo, createSignal } from \"solid-js\";\n\nimport type { Rect } from \"@thewaver/ss-utils\";\n\nimport { ElementObserver } from \"../../Abstracts/ElementObserver/ElementObserver\";\nimport { access } from \"../../Utils/propUtils\";\nimport type { MosaicPlacement, MosaicProps, MosaicSizeAnchor } from \"./Mosaic.types\";\nimport { MosaicUtils } from \"./Mosaic.utils\";\n\nimport * as styles from \"./Mosaic.css\";\n\nconst DEFAULT_MOSAIC_SIZE_ANCHOR: MosaicSizeAnchor = \"width\";\nconst DEFAULT_MOSAIC_GAP = 0;\n\nconst EMPTY_RECT: Rect = { x: 0, y: 0, width: 0, height: 0 };\nconst EMPTY_LAYOUT = { placements: [] as MosaicPlacement[], freeExtent: 0 };\n\nconst isSameOrder = (prev: number[], next: number[]) =>\n    prev.length === next.length && prev.every((index, at) => index === next[at]);\n\nexport const Mosaic = (props: MosaicProps) => {\n    const getSizeAnchor = createMemo(() => access(props.sizeAnchor) ?? DEFAULT_MOSAIC_SIZE_ANCHOR);\n\n    const getGap = createMemo(() => access(props.gap) ?? DEFAULT_MOSAIC_GAP);\n\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\n\n    const getRootSize = ElementObserver.createBorderBoxSizeObserver(getRootRef);\n\n    const getAnchoredExtent = createMemo(() =>\n        getSizeAnchor() === \"width\" ? getRootSize().width : getRootSize().height,\n    );\n\n    const getLayout = createMemo(() => {\n        const sizes = access(props.sizes);\n        const anchoredExtent = getAnchoredExtent();\n\n        if (anchoredExtent <= 0 || !sizes.length) return EMPTY_LAYOUT;\n\n        const isTransposed = getSizeAnchor() === \"height\";\n\n        const packed = MosaicUtils.sortIntoReadingOrder(\n            props.computePlacements({\n                sizes: isTransposed ? sizes.map(MosaicUtils.transposeSize) : sizes,\n                anchoredExtent,\n                gap: getGap(),\n            }),\n        );\n\n        return {\n            placements: isTransposed ? packed.map(MosaicUtils.transposePlacement) : packed,\n            freeExtent: MosaicUtils.getFreeExtent(packed),\n        };\n    });\n\n    const getRectByIndex = createMemo(\n        () => new Map(getLayout().placements.map((placement) => [placement.index, placement as Rect])),\n    );\n\n    const getOrder = createMemo<number[], undefined>(\n        () => {\n            const placed = getLayout().placements.map((placement) => placement.index);\n            const isPlaced = new Set(placed);\n\n            return [...placed, ...access(props.sizes).flatMap((_, index) => (isPlaced.has(index) ? [] : [index]))];\n        },\n        undefined,\n        { equals: isSameOrder },\n    );\n\n    return (\n        <div\n            ref={setRootRef}\n            class={styles.mosaicRoot}\n            style={{\n                width: getSizeAnchor() === \"width\" ? \"100%\" : `${getLayout().freeExtent}px`,\n                height: getSizeAnchor() === \"height\" ? \"100%\" : `${getLayout().freeExtent}px`,\n            }}\n        >\n            <For each={getOrder()}>\n                {(index, getReadingIndex) => {\n                    const getIsPlaced = createMemo(() => getRectByIndex().has(index));\n                    const getRect = createMemo(() => getRectByIndex().get(index) ?? EMPTY_RECT);\n\n                    return (\n                        <div\n                            class={styles.mosaicItem}\n                            classList={{ [styles.mosaicSizedItem]: access(props.isItemSized) }}\n                            style={{\n                                left: `${getRect().x}px`,\n                                top: `${getRect().y}px`,\n                                width: access(props.isItemSized) ? `${getRect().width}px` : undefined,\n                                height: access(props.isItemSized) ? `${getRect().height}px` : undefined,\n                                visibility: getIsPlaced() ? undefined : \"hidden\",\n                            }}\n                        >\n                            {props.renderItem(index, () => ({\n                                index,\n                                readingIndex: getReadingIndex(),\n                                itemCount: access(props.sizes).length,\n                                rect: getRect(),\n                            }))}\n                        </div>\n                    );\n                }}\n            </For>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Exotics/Mosaic/Mosaic.utils.js

@@ -0,0 +1,185 @@
+//#region src/Exotics/Mosaic/Mosaic.utils.ts
+var CUT_TOLERANCE_PX = .5;
+var getSkylineTop = (skyline, x, width) => skyline.reduce((top, segment) => segment.x + segment.width <= x || segment.x >= x + width ? top : Math.max(top, segment.y), 0);
+var getLowestSpot = (skyline, width, limit) => skyline.filter((segment) => segment.x + width <= limit).map((segment) => ({
+	x: segment.x,
+	y: getSkylineTop(skyline, segment.x, width)
+})).reduce((lowest, spot) => spot.y < lowest.y ? spot : lowest);
+var withSkylineTop = (skyline, x, width, top) => {
+	const end = x + width;
+	const sorted = [...skyline.flatMap((segment) => {
+		if (segment.x + segment.width <= x || segment.x >= end) return [segment];
+		const head = segment.x < x ? [{
+			x: segment.x,
+			width: x - segment.x,
+			y: segment.y
+		}] : [];
+		const tail = segment.x + segment.width > end ? [{
+			x: end,
+			width: segment.x + segment.width - end,
+			y: segment.y
+		}] : [];
+		return [...head, ...tail];
+	}), {
+		x,
+		width,
+		y: top
+	}].sort((a, b) => a.x - b.x);
+	const merged = [];
+	for (const segment of sorted) {
+		const last = merged[merged.length - 1];
+		if (last && last.y === segment.y && last.x + last.width === segment.x) last.width += segment.width;
+		else merged.push({ ...segment });
+	}
+	return merged;
+};
+var getRowExtent = (ratioSums, row, anchoredExtent, gap) => {
+	const span = anchoredExtent - (row.to - row.from - 1) * gap;
+	const ratioSum = ratioSums[row.to] - ratioSums[row.from];
+	return span > 0 && ratioSum > 0 ? span / ratioSum : Infinity;
+};
+var getTotalExtent = (rows, ratioSums, anchoredExtent, gap) => rows.reduce((extent, row) => extent + getRowExtent(ratioSums, row, anchoredExtent, gap), 0) + (rows.length - 1) * gap;
+var partitionIntoRows = (ratioSums, rowCount, anchoredExtent, gap, targetRowExtent) => {
+	const cellCount = ratioSums.length - 1;
+	const cost = Array.from({ length: rowCount + 1 }, () => new Array(cellCount + 1).fill(Infinity));
+	const cut = Array.from({ length: rowCount + 1 }, () => new Array(cellCount + 1).fill(0));
+	cost[0][0] = 0;
+	for (let row = 1; row <= rowCount; row++) for (let end = row; end <= cellCount; end++) for (let start = row - 1; start < end; start++) {
+		if (cost[row - 1][start] === Infinity) continue;
+		const extent = getRowExtent(ratioSums, {
+			from: start,
+			to: end
+		}, anchoredExtent, gap);
+		if (extent === Infinity) continue;
+		const total = cost[row - 1][start] + (extent - targetRowExtent) ** 2;
+		if (total >= cost[row][end]) continue;
+		cost[row][end] = total;
+		cut[row][end] = start;
+	}
+	if (cost[rowCount][cellCount] === Infinity) return void 0;
+	const rows = [];
+	let end = cellCount;
+	for (let row = rowCount; row > 0; row--) {
+		const from = cut[row][end];
+		rows.unshift({
+			from,
+			to: end
+		});
+		end = from;
+	}
+	return rows;
+};
+var getBandStart = (placement, isBanded) => isBanded ? placement.y : placement.x;
+var getBandEnd = (placement, isBanded) => isBanded ? placement.y + placement.height : placement.x + placement.width;
+var splitIntoBands = (placements, isBanded) => {
+	const sorted = [...placements].sort((a, b) => getBandStart(a, isBanded) - getBandStart(b, isBanded) || a.index - b.index);
+	const bands = [];
+	let frontier = -Infinity;
+	for (const placement of sorted) {
+		if (!bands.length || getBandStart(placement, isBanded) + CUT_TOLERANCE_PX >= frontier) {
+			bands.push([]);
+			frontier = -Infinity;
+		}
+		bands[bands.length - 1].push(placement);
+		frontier = Math.max(frontier, getBandEnd(placement, isBanded));
+	}
+	return bands;
+};
+var compareByReadingCorner = (a, b) => a.y - b.y || a.x - b.x || a.index - b.index;
+var cutIntoReadingOrder = (placements, isBanded, hasTriedBothAxes) => {
+	if (placements.length < 2) return placements;
+	const bands = splitIntoBands(placements, isBanded);
+	if (bands.length > 1) return bands.flatMap((band) => cutIntoReadingOrder(band, !isBanded, false));
+	if (hasTriedBothAxes) return [...placements].sort(compareByReadingCorner);
+	return cutIntoReadingOrder(placements, !isBanded, true);
+};
+var MosaicUtils;
+(function(_MosaicUtils) {
+	_MosaicUtils.transposeSize = (size) => ({
+		width: size.height,
+		height: size.width
+	});
+	_MosaicUtils.transposePlacement = (placement) => ({
+		index: placement.index,
+		x: placement.y,
+		y: placement.x,
+		width: placement.height,
+		height: placement.width
+	});
+	_MosaicUtils.getFreeExtent = (placements) => placements.reduce((extent, placement) => Math.max(extent, placement.y + placement.height), 0);
+	_MosaicUtils.packFixed = ({ sizes, anchoredExtent, gap }) => {
+		const limit = anchoredExtent + gap;
+		const cells = sizes.map((size, index) => ({
+			index,
+			width: size.width + gap,
+			height: size.height + gap
+		})).filter((cell) => cell.width > gap && cell.height > gap).sort((a, b) => b.height - a.height || b.width - a.width || a.index - b.index);
+		const placements = [];
+		let skyline = [{
+			x: 0,
+			width: limit,
+			y: 0
+		}];
+		for (const cell of cells) {
+			const reserved = Math.min(cell.width, limit);
+			const spot = getLowestSpot(skyline, reserved, limit);
+			placements.push({
+				index: cell.index,
+				x: spot.x,
+				y: spot.y,
+				width: cell.width - gap,
+				height: cell.height - gap
+			});
+			skyline = withSkylineTop(skyline, spot.x, reserved, spot.y + cell.height);
+		}
+		return placements;
+	};
+	_MosaicUtils.packScaled = ({ sizes, anchoredExtent, gap }, targetAspectRatio) => {
+		const cells = sizes.map((size, index) => ({
+			index,
+			ratio: size.height > 0 ? size.width / size.height : 0
+		})).filter((cell) => cell.ratio > 0);
+		if (!cells.length) return [];
+		const ratioSums = cells.reduce((sums, cell) => [...sums, sums[sums.length - 1] + cell.ratio], [0]);
+		const targetExtent = targetAspectRatio.width > 0 ? anchoredExtent * targetAspectRatio.height / targetAspectRatio.width : anchoredExtent;
+		let best;
+		let bestDistance = Infinity;
+		for (let rowCount = 1; rowCount <= cells.length; rowCount++) {
+			const targetRowExtent = Math.max(0, (targetExtent - (rowCount - 1) * gap) / rowCount);
+			const rows = partitionIntoRows(ratioSums, rowCount, anchoredExtent, gap, targetRowExtent);
+			if (!rows) continue;
+			const extent = getTotalExtent(rows, ratioSums, anchoredExtent, gap);
+			const distance = Math.abs(extent - targetExtent);
+			if (distance < bestDistance) {
+				best = rows;
+				bestDistance = distance;
+			}
+			if (extent >= targetExtent) break;
+		}
+		if (!best) return [];
+		const placements = [];
+		let y = 0;
+		for (const row of best) {
+			const extent = getRowExtent(ratioSums, row, anchoredExtent, gap);
+			let x = 0;
+			for (let at = row.from; at < row.to; at++) {
+				const width = cells[at].ratio * extent;
+				placements.push({
+					index: cells[at].index,
+					x,
+					y,
+					width,
+					height: extent
+				});
+				x += width + gap;
+			}
+			y += extent + gap;
+		}
+		return placements;
+	};
+	_MosaicUtils.sortIntoReadingOrder = (placements) => cutIntoReadingOrder(placements, true, false);
+})(MosaicUtils || (MosaicUtils = {}));
+//#endregion
+export { MosaicUtils };
+
+//# sourceMappingURL=Mosaic.utils.js.map

package/dist/Exotics/Mosaic/Mosaic.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mosaic.utils.js","names":[],"sources":["../../../src/Exotics/Mosaic/Mosaic.utils.ts"],"sourcesContent":["import type { Size2d } from \"@thewaver/ss-utils\";\n\nimport type { MosaicPackDefs, MosaicPlacement } from \"./Mosaic.types\";\n\ntype MosaicSkylineSegment = {\n    x: number;\n    width: number;\n    y: number;\n};\n\ntype MosaicSpot = {\n    x: number;\n    y: number;\n};\n\nconst CUT_TOLERANCE_PX = 0.5;\n\nconst getSkylineTop = (skyline: MosaicSkylineSegment[], x: number, width: number) =>\n    skyline.reduce(\n        (top, segment) => (segment.x + segment.width <= x || segment.x >= x + width ? top : Math.max(top, segment.y)),\n        0,\n    );\n\nconst getLowestSpot = (skyline: MosaicSkylineSegment[], width: number, limit: number): MosaicSpot =>\n    skyline\n        .filter((segment) => segment.x + width <= limit)\n        .map((segment) => ({ x: segment.x, y: getSkylineTop(skyline, segment.x, width) }))\n        .reduce((lowest, spot) => (spot.y < lowest.y ? spot : lowest));\n\nconst withSkylineTop = (skyline: MosaicSkylineSegment[], x: number, width: number, top: number) => {\n    const end = x + width;\n\n    const split = skyline.flatMap((segment) => {\n        if (segment.x + segment.width <= x || segment.x >= end) return [segment];\n\n        const head = segment.x < x ? [{ x: segment.x, width: x - segment.x, y: segment.y }] : [];\n        const tail =\n            segment.x + segment.width > end ? [{ x: end, width: segment.x + segment.width - end, y: segment.y }] : [];\n\n        return [...head, ...tail];\n    });\n\n    const sorted = [...split, { x, width, y: top }].sort((a, b) => a.x - b.x);\n    const merged: MosaicSkylineSegment[] = [];\n\n    for (const segment of sorted) {\n        const last = merged[merged.length - 1];\n\n        if (last && last.y === segment.y && last.x + last.width === segment.x) {\n            last.width += segment.width;\n        } else {\n            merged.push({ ...segment });\n        }\n    }\n\n    return merged;\n};\n\ntype MosaicRow = {\n    from: number;\n    to: number;\n};\n\ntype MosaicCell = {\n    index: number;\n    ratio: number;\n};\n\nconst getRowExtent = (ratioSums: number[], row: MosaicRow, anchoredExtent: number, gap: number) => {\n    const span = anchoredExtent - (row.to - row.from - 1) * gap;\n    const ratioSum = ratioSums[row.to] - ratioSums[row.from];\n\n    return span > 0 && ratioSum > 0 ? span / ratioSum : Infinity;\n};\n\nconst getTotalExtent = (rows: MosaicRow[], ratioSums: number[], anchoredExtent: number, gap: number) =>\n    rows.reduce((extent, row) => extent + getRowExtent(ratioSums, row, anchoredExtent, gap), 0) +\n    (rows.length - 1) * gap;\n\nconst partitionIntoRows = (\n    ratioSums: number[],\n    rowCount: number,\n    anchoredExtent: number,\n    gap: number,\n    targetRowExtent: number,\n) => {\n    const cellCount = ratioSums.length - 1;\n    const cost = Array.from({ length: rowCount + 1 }, () => new Array<number>(cellCount + 1).fill(Infinity));\n    const cut = Array.from({ length: rowCount + 1 }, () => new Array<number>(cellCount + 1).fill(0));\n\n    cost[0][0] = 0;\n\n    for (let row = 1; row <= rowCount; row++) {\n        for (let end = row; end <= cellCount; end++) {\n            for (let start = row - 1; start < end; start++) {\n                if (cost[row - 1][start] === Infinity) continue;\n\n                const extent = getRowExtent(ratioSums, { from: start, to: end }, anchoredExtent, gap);\n\n                if (extent === Infinity) continue;\n\n                const total = cost[row - 1][start] + (extent - targetRowExtent) ** 2;\n\n                if (total >= cost[row][end]) continue;\n\n                cost[row][end] = total;\n                cut[row][end] = start;\n            }\n        }\n    }\n\n    if (cost[rowCount][cellCount] === Infinity) return undefined;\n\n    const rows: MosaicRow[] = [];\n    let end = cellCount;\n\n    for (let row = rowCount; row > 0; row--) {\n        const from = cut[row][end];\n\n        rows.unshift({ from, to: end });\n        end = from;\n    }\n\n    return rows;\n};\n\nconst getBandStart = (placement: MosaicPlacement, isBanded: boolean) => (isBanded ? placement.y : placement.x);\n\nconst getBandEnd = (placement: MosaicPlacement, isBanded: boolean) =>\n    isBanded ? placement.y + placement.height : placement.x + placement.width;\n\nconst splitIntoBands = (placements: MosaicPlacement[], isBanded: boolean) => {\n    const sorted = [...placements].sort(\n        (a, b) => getBandStart(a, isBanded) - getBandStart(b, isBanded) || a.index - b.index,\n    );\n\n    const bands: MosaicPlacement[][] = [];\n    let frontier = -Infinity;\n\n    for (const placement of sorted) {\n        if (!bands.length || getBandStart(placement, isBanded) + CUT_TOLERANCE_PX >= frontier) {\n            bands.push([]);\n            frontier = -Infinity;\n        }\n\n        bands[bands.length - 1].push(placement);\n        frontier = Math.max(frontier, getBandEnd(placement, isBanded));\n    }\n\n    return bands;\n};\n\nconst compareByReadingCorner = (a: MosaicPlacement, b: MosaicPlacement) => a.y - b.y || a.x - b.x || a.index - b.index;\n\nconst cutIntoReadingOrder = (\n    placements: MosaicPlacement[],\n    isBanded: boolean,\n    hasTriedBothAxes: boolean,\n): MosaicPlacement[] => {\n    if (placements.length < 2) return placements;\n\n    const bands = splitIntoBands(placements, isBanded);\n\n    if (bands.length > 1) return bands.flatMap((band) => cutIntoReadingOrder(band, !isBanded, false));\n\n    if (hasTriedBothAxes) return [...placements].sort(compareByReadingCorner);\n\n    return cutIntoReadingOrder(placements, !isBanded, true);\n};\n\nexport namespace MosaicUtils {\n    export const transposeSize = (size: Size2d): Size2d => ({ width: size.height, height: size.width });\n\n    export const transposePlacement = (placement: MosaicPlacement): MosaicPlacement => ({\n        index: placement.index,\n        x: placement.y,\n        y: placement.x,\n        width: placement.height,\n        height: placement.width,\n    });\n\n    export const getFreeExtent = (placements: MosaicPlacement[]) =>\n        placements.reduce((extent, placement) => Math.max(extent, placement.y + placement.height), 0);\n\n    export const packFixed = ({ sizes, anchoredExtent, gap }: MosaicPackDefs): MosaicPlacement[] => {\n        const limit = anchoredExtent + gap;\n        const cells = sizes\n            .map((size, index) => ({ index, width: size.width + gap, height: size.height + gap }))\n            .filter((cell) => cell.width > gap && cell.height > gap)\n            .sort((a, b) => b.height - a.height || b.width - a.width || a.index - b.index);\n\n        const placements: MosaicPlacement[] = [];\n        let skyline: MosaicSkylineSegment[] = [{ x: 0, width: limit, y: 0 }];\n\n        for (const cell of cells) {\n            const reserved = Math.min(cell.width, limit);\n            const spot = getLowestSpot(skyline, reserved, limit);\n\n            placements.push({\n                index: cell.index,\n                x: spot.x,\n                y: spot.y,\n                width: cell.width - gap,\n                height: cell.height - gap,\n            });\n\n            skyline = withSkylineTop(skyline, spot.x, reserved, spot.y + cell.height);\n        }\n\n        return placements;\n    };\n\n    export const packScaled = (\n        { sizes, anchoredExtent, gap }: MosaicPackDefs,\n        targetAspectRatio: Size2d,\n    ): MosaicPlacement[] => {\n        const cells: MosaicCell[] = sizes\n            .map((size, index) => ({ index, ratio: size.height > 0 ? size.width / size.height : 0 }))\n            .filter((cell) => cell.ratio > 0);\n\n        if (!cells.length) return [];\n\n        const ratioSums = cells.reduce((sums, cell) => [...sums, sums[sums.length - 1] + cell.ratio], [0]);\n\n        const targetExtent =\n            targetAspectRatio.width > 0\n                ? (anchoredExtent * targetAspectRatio.height) / targetAspectRatio.width\n                : anchoredExtent;\n\n        let best: MosaicRow[] | undefined;\n        let bestDistance = Infinity;\n\n        for (let rowCount = 1; rowCount <= cells.length; rowCount++) {\n            const targetRowExtent = Math.max(0, (targetExtent - (rowCount - 1) * gap) / rowCount);\n            const rows = partitionIntoRows(ratioSums, rowCount, anchoredExtent, gap, targetRowExtent);\n\n            if (!rows) continue;\n\n            const extent = getTotalExtent(rows, ratioSums, anchoredExtent, gap);\n            const distance = Math.abs(extent - targetExtent);\n\n            if (distance < bestDistance) {\n                best = rows;\n                bestDistance = distance;\n            }\n\n            if (extent >= targetExtent) break;\n        }\n\n        if (!best) return [];\n\n        const placements: MosaicPlacement[] = [];\n        let y = 0;\n\n        for (const row of best) {\n            const extent = getRowExtent(ratioSums, row, anchoredExtent, gap);\n            let x = 0;\n\n            for (let at = row.from; at < row.to; at++) {\n                const width = cells[at].ratio * extent;\n\n                placements.push({ index: cells[at].index, x, y, width, height: extent });\n                x += width + gap;\n            }\n\n            y += extent + gap;\n        }\n\n        return placements;\n    };\n\n    export const sortIntoReadingOrder = (placements: MosaicPlacement[]) => cutIntoReadingOrder(placements, true, false);\n}\n"],"mappings":"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"}

package/dist/Exotics/Odometer/Odometer.css.js

@@ -0,0 +1,12 @@
+/* empty css                            */
+//#region src/Exotics/Odometer/Odometer.css.ts
+var odometerRoot = "_1qsy27y0";
+var odometerValue = "_1qsy27y1";
+var odometerWindow = "_1qsy27y2";
+var odometerBarrel = "_1qsy27y3";
+var odometerFixed = "_1qsy27y4";
+var odometerDigitFace = "_1qsy27y5";
+//#endregion
+export { odometerBarrel, odometerDigitFace, odometerFixed, odometerRoot, odometerValue, odometerWindow };
+
+//# sourceMappingURL=Odometer.css.js.map

package/dist/Exotics/Odometer/Odometer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Odometer.css.js","names":[],"sources":["../../../src/Exotics/Odometer/Odometer.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const odometerRoot = style({\n    display: \"inline-flex\",\n    alignItems: \"center\",\n});\n\nexport const odometerValue = style({\n    position: \"absolute\",\n    width: 1,\n    height: 1,\n    margin: -1,\n    padding: 0,\n    border: 0,\n    clipPath: \"inset(50%)\",\n    overflow: \"hidden\",\n    whiteSpace: \"nowrap\",\n});\n\nexport const odometerWindow = style({\n    position: \"relative\",\n    flex: \"none\",\n    overflow: \"hidden\",\n});\n\nexport const odometerBarrel = style({\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    transform: \"translate(-50%, -50%)\",\n});\n\nexport const odometerFixed = style({\n    display: \"grid\",\n    placeItems: \"center\",\n    flex: \"none\",\n});\n\nexport const odometerDigitFace = style({\n    display: \"grid\",\n    placeItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n});\n"],"mappings":""}

package/dist/Exotics/Odometer/Odometer.js

@@ -0,0 +1,118 @@
+import { access } from "../../Utils/propUtils.js";
+import { Barrel } from "../../Abstracts/Barrel/Barrel.js";
+import { ODOMETER_DIGITS, OdometerUtils } from "./Odometer.utils.js";
+import { odometerBarrel, odometerDigitFace, odometerFixed, odometerRoot, odometerValue, odometerWindow } from "./Odometer.css.js";
+import { Index, createEffect, createMemo, createSignal, on, untrack } from "solid-js";
+import { className, createComponent, effect, insert, setAttribute, setStyleProperty, template } from "solid-js/web";
+//#region src/Exotics/Odometer/Odometer.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><span>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div aria-hidden=true>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div><div>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div>`);
+var DEFAULT_TURN_DURATION_MS = 600;
+var DEFAULT_CASCADE_DELAY_MS = 90;
+var RESTING_ANGLE = 0;
+var NO_DELAY = 0;
+var Odometer = (props) => {
+	const getSlots = createMemo(() => OdometerUtils.getSlots(access(props.text)));
+	const getDigits = createMemo(() => OdometerUtils.getDigits(getSlots()));
+	let shownDigits = untrack(getDigits);
+	const [getAngles, setAngles] = createSignal(shownDigits.map(OdometerUtils.getRestingAngle));
+	const [getDelays, setDelays] = createSignal([]);
+	const getDigitSize = createMemo(() => access(props.digitSize));
+	const getCascadeDelayMs = createMemo(() => access(props.cascadeDelayMs) ?? DEFAULT_CASCADE_DELAY_MS);
+	createEffect(on(getDigits, (digits) => {
+		const direction = OdometerUtils.compareDigits(shownDigits, digits);
+		const previous = getAngles();
+		setDelays(direction === "same" ? digits.map(() => NO_DELAY) : OdometerUtils.computeCascadeDelays(shownDigits, digits, getCascadeDelayMs()));
+		setAngles(digits.map((digit, index) => {
+			const wasShowing = shownDigits[index];
+			if (wasShowing === void 0) return OdometerUtils.getRestingAngle(digit);
+			return (previous[index] ?? RESTING_ANGLE) + OdometerUtils.computeAngleDelta(wasShowing, digit, direction);
+		}));
+		shownDigits = digits;
+	}, { defer: true }));
+	const getAngle = (digitIndex) => getAngles()[digitIndex] ?? RESTING_ANGLE;
+	const getDelay = (digitIndex) => getDelays()[digitIndex] ?? NO_DELAY;
+	const getFixedSlots = createMemo(() => getSlots().flatMap((slot, order) => slot.kind === "fixed" ? [{
+		character: slot.character,
+		order
+	}] : []));
+	const getDigitOrders = createMemo(() => getSlots().flatMap((slot, order) => slot.kind === "digit" ? [order] : []));
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		className(_el$, odometerRoot);
+		className(_el$2, odometerValue);
+		insert(_el$2, () => access(props.text));
+		insert(_el$, createComponent(Index, {
+			get each() {
+				return getFixedSlots();
+			},
+			children: (getSlot) => (() => {
+				var _el$3 = _tmpl$2();
+				className(_el$3, odometerFixed);
+				insert(_el$3, () => props.renderFixed?.(() => getSlot().character) ?? getSlot().character);
+				effect((_p$) => {
+					var _v$ = getSlot().order, _v$2 = `${getDigitSize().width}px`, _v$3 = `${getDigitSize().height}px`;
+					_v$ !== _p$.e && setStyleProperty(_el$3, "order", _p$.e = _v$);
+					_v$2 !== _p$.t && setStyleProperty(_el$3, "width", _p$.t = _v$2);
+					_v$3 !== _p$.a && setStyleProperty(_el$3, "height", _p$.a = _v$3);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$3;
+			})()
+		}), null);
+		insert(_el$, createComponent(Index, {
+			get each() {
+				return getDigitOrders();
+			},
+			children: (getOrder, digitIndex) => (() => {
+				var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
+				className(_el$4, odometerWindow);
+				className(_el$5, odometerBarrel);
+				insert(_el$5, createComponent(Barrel, {
+					faces: ODOMETER_DIGITS,
+					axis: "column",
+					hasBacks: false,
+					faceSize: getDigitSize,
+					angle: () => getAngle(digitIndex),
+					transitionDurationMs: () => access(props.turnDurationMs) ?? DEFAULT_TURN_DURATION_MS,
+					transitionDelayMs: () => getDelay(digitIndex),
+					faceRoleDescription: "",
+					computeFaceDefs: () => ({
+						ariaLabel: "",
+						isHidden: true
+					}),
+					renderFace: (getFace) => (() => {
+						var _el$6 = _tmpl$4();
+						className(_el$6, odometerDigitFace);
+						insert(_el$6, () => props.renderDigit?.(getFace) ?? getFace());
+						return _el$6;
+					})()
+				}));
+				effect((_p$) => {
+					var _v$4 = getOrder(), _v$5 = `${getDigitSize().width}px`, _v$6 = `${getDigitSize().height}px`;
+					_v$4 !== _p$.e && setStyleProperty(_el$4, "order", _p$.e = _v$4);
+					_v$5 !== _p$.t && setStyleProperty(_el$4, "width", _p$.t = _v$5);
+					_v$6 !== _p$.a && setStyleProperty(_el$4, "height", _p$.a = _v$6);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$4;
+			})()
+		}), null);
+		effect(() => setAttribute(_el$, "aria-label", access(props.ariaLabel)));
+		return _el$;
+	})();
+};
+//#endregion
+export { Odometer };
+
+//# sourceMappingURL=Odometer.js.map

package/dist/Exotics/Odometer/Odometer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Odometer.js","names":["Index","createEffect","createMemo","createSignal","on","untrack","Barrel","access","OdometerProps","ODOMETER_DIGITS","OdometerUtils","styles","DEFAULT_TURN_DURATION_MS","DEFAULT_CASCADE_DELAY_MS","RESTING_ANGLE","NO_DELAY","Odometer","props","getSlots","text","getDigits","shownDigits","getAngles","setAngles","map","getRestingAngle","getDelays","setDelays","getDigitSize","digitSize","getCascadeDelayMs","cascadeDelayMs","digits","direction","compareDigits","previous","computeCascadeDelays","digit","index","wasShowing","undefined","computeAngleDelta","defer","getAngle","digitIndex","getDelay","getFixedSlots","flatMap","slot","order","kind","character","getDigitOrders","_el$","_tmpl$","_el$2","firstChild","_$className","odometerRoot","odometerValue","_$insert","_$createComponent","each","children","getSlot","_el$3","_tmpl$2","odometerFixed","renderFixed","_$effect","_p$","_v$","_v$2","width","_v$3","height","e","_$setStyleProperty","t","a","getOrder","_el$4","_tmpl$3","_el$5","odometerWindow","odometerBarrel","faces","axis","hasBacks","faceSize","angle","transitionDurationMs","turnDurationMs","transitionDelayMs","faceRoleDescription","computeFaceDefs","ariaLabel","isHidden","renderFace","getFace","_el$6","_tmpl$4","odometerDigitFace","renderDigit","_v$4","_v$5","_v$6","_$setAttribute"],"sources":["../../../src/Exotics/Odometer/Odometer.tsx"],"sourcesContent":["import { Index, createEffect, createMemo, createSignal, on, untrack } from \"solid-js\";\n\nimport { Barrel } from \"../../Abstracts/Barrel/Barrel\";\nimport { access } from \"../../Utils/propUtils\";\nimport type { OdometerProps } from \"./Odometer.types\";\nimport { ODOMETER_DIGITS, OdometerUtils } from \"./Odometer.utils\";\n\nimport * as styles from \"./Odometer.css\";\n\nconst DEFAULT_TURN_DURATION_MS = 600;\nconst DEFAULT_CASCADE_DELAY_MS = 90;\nconst RESTING_ANGLE = 0;\nconst NO_DELAY = 0;\n\nexport const Odometer = (props: OdometerProps) => {\n    const getSlots = createMemo(() => OdometerUtils.getSlots(access(props.text)));\n\n    const getDigits = createMemo(() => OdometerUtils.getDigits(getSlots()));\n\n    let shownDigits = untrack(getDigits);\n\n    const [getAngles, setAngles] = createSignal(shownDigits.map(OdometerUtils.getRestingAngle));\n    const [getDelays, setDelays] = createSignal<number[]>([]);\n\n    const getDigitSize = createMemo(() => access(props.digitSize));\n\n    const getCascadeDelayMs = createMemo(() => access(props.cascadeDelayMs) ?? DEFAULT_CASCADE_DELAY_MS);\n\n    createEffect(\n        on(\n            getDigits,\n            (digits) => {\n                const direction = OdometerUtils.compareDigits(shownDigits, digits);\n                const previous = getAngles();\n\n                setDelays(\n                    direction === \"same\"\n                        ? digits.map(() => NO_DELAY)\n                        : OdometerUtils.computeCascadeDelays(shownDigits, digits, getCascadeDelayMs()),\n                );\n\n                setAngles(\n                    digits.map((digit, index) => {\n                        const wasShowing = shownDigits[index];\n\n                        if (wasShowing === undefined) return OdometerUtils.getRestingAngle(digit);\n\n                        return (\n                            (previous[index] ?? RESTING_ANGLE) +\n                            OdometerUtils.computeAngleDelta(wasShowing, digit, direction)\n                        );\n                    }),\n                );\n\n                shownDigits = digits;\n            },\n            { defer: true },\n        ),\n    );\n\n    const getAngle = (digitIndex: number) => getAngles()[digitIndex] ?? RESTING_ANGLE;\n\n    const getDelay = (digitIndex: number) => getDelays()[digitIndex] ?? NO_DELAY;\n\n    const getFixedSlots = createMemo(() =>\n        getSlots().flatMap((slot, order) => (slot.kind === \"fixed\" ? [{ character: slot.character, order }] : [])),\n    );\n\n    const getDigitOrders = createMemo(() =>\n        getSlots().flatMap((slot, order) => (slot.kind === \"digit\" ? [order] : [])),\n    );\n\n    return (\n        <div class={styles.odometerRoot} aria-label={access(props.ariaLabel)}>\n            <span class={styles.odometerValue}>{access(props.text)}</span>\n\n            <Index each={getFixedSlots()}>\n                {(getSlot) => (\n                    <div\n                        class={styles.odometerFixed}\n                        style={{\n                            order: getSlot().order,\n                            width: `${getDigitSize().width}px`,\n                            height: `${getDigitSize().height}px`,\n                        }}\n                        aria-hidden=\"true\"\n                    >\n                        {props.renderFixed?.(() => getSlot().character) ?? getSlot().character}\n                    </div>\n                )}\n            </Index>\n\n            <Index each={getDigitOrders()}>\n                {(getOrder, digitIndex) => (\n                    <div\n                        class={styles.odometerWindow}\n                        style={{\n                            order: getOrder(),\n                            width: `${getDigitSize().width}px`,\n                            height: `${getDigitSize().height}px`,\n                        }}\n                    >\n                        <div class={styles.odometerBarrel}>\n                            <Barrel\n                                faces={ODOMETER_DIGITS}\n                                axis={\"column\"}\n                                hasBacks={false}\n                                faceSize={getDigitSize}\n                                angle={() => getAngle(digitIndex)}\n                                transitionDurationMs={() => access(props.turnDurationMs) ?? DEFAULT_TURN_DURATION_MS}\n                                transitionDelayMs={() => getDelay(digitIndex)}\n                                faceRoleDescription={\"\"}\n                                computeFaceDefs={() => ({ ariaLabel: \"\", isHidden: true })}\n                                renderFace={(getFace) => (\n                                    <div class={styles.odometerDigitFace}>\n                                        {props.renderDigit?.(getFace) ?? getFace()}\n                                    </div>\n                                )}\n                            />\n                        </div>\n                    </div>\n                )}\n            </Index>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Exotics/Odometer/Odometer.utils.js

@@ -0,0 +1,44 @@
+import { RotationUtils } from "@thewaver/ss-utils";
+//#region src/Exotics/Odometer/Odometer.utils.ts
+var DIGIT_COUNT = 10;
+var NOTHING = 0;
+var SINGLE = 1;
+var NO_DIGIT = -1;
+var ODOMETER_DIGITS = Array.from({ length: DIGIT_COUNT }, (_unused, index) => String(index));
+var OdometerUtils;
+(function(_OdometerUtils) {
+	_OdometerUtils.getSlots = (text) => {
+		let digitIndex = NO_DIGIT;
+		return Array.from(text).map((character) => {
+			const isDigit = character >= "0" && character <= "9";
+			if (isDigit) digitIndex += SINGLE;
+			return {
+				kind: isDigit ? "digit" : "fixed",
+				character,
+				digitIndex: isDigit ? digitIndex : NO_DIGIT
+			};
+		});
+	};
+	_OdometerUtils.getDigits = (slots) => slots.filter((slot) => slot.kind === "digit").map((slot) => Number(slot.character));
+	_OdometerUtils.compareDigits = (previous, next) => {
+		if (previous.length !== next.length) return next.length > previous.length ? "up" : "down";
+		for (let index = NOTHING; index < next.length; index++) {
+			if (next[index] === previous[index]) continue;
+			return next[index] > previous[index] ? "up" : "down";
+		}
+		return "same";
+	};
+	_OdometerUtils.getRestingAngle = (digit) => RotationUtils.getIndexAngle(digit, DIGIT_COUNT);
+	const computeStepDelta = _OdometerUtils.computeStepDelta = (previous, next, direction) => {
+		if (direction === "down") return -((previous - next) % DIGIT_COUNT + DIGIT_COUNT) % DIGIT_COUNT;
+		return ((next - previous) % DIGIT_COUNT + DIGIT_COUNT) % DIGIT_COUNT;
+	};
+	_OdometerUtils.computeAngleDelta = (previous, next, direction) => -computeStepDelta(previous, next, direction) * RotationUtils.getStepAngle(DIGIT_COUNT);
+	_OdometerUtils.computeCascadeDelays = (previous, next, delayMs) => next.map((_unused, index) => {
+		return next.slice(index + SINGLE).filter((digit, offset) => digit !== previous[index + SINGLE + offset]).length * delayMs;
+	});
+})(OdometerUtils || (OdometerUtils = {}));
+//#endregion
+export { ODOMETER_DIGITS, OdometerUtils };
+
+//# sourceMappingURL=Odometer.utils.js.map

package/dist/Exotics/Odometer/Odometer.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Odometer.utils.js","names":[],"sources":["../../../src/Exotics/Odometer/Odometer.utils.ts"],"sourcesContent":["import { RotationUtils } from \"@thewaver/ss-utils\";\n\nimport type { OdometerDirection, OdometerSlot } from \"./Odometer.types\";\n\nconst DIGIT_COUNT = 10;\nconst NOTHING = 0;\nconst SINGLE = 1;\nconst NO_DIGIT = -1;\n\nexport const ODOMETER_DIGITS = Array.from({ length: DIGIT_COUNT }, (_unused, index) => String(index));\n\nexport namespace OdometerUtils {\n    export const getSlots = (text: string): OdometerSlot[] => {\n        let digitIndex = NO_DIGIT;\n\n        return Array.from(text).map((character) => {\n            const isDigit = character >= \"0\" && character <= \"9\";\n\n            if (isDigit) digitIndex += SINGLE;\n\n            return {\n                kind: isDigit ? \"digit\" : \"fixed\",\n                character,\n                digitIndex: isDigit ? digitIndex : NO_DIGIT,\n            };\n        });\n    };\n\n    export const getDigits = (slots: OdometerSlot[]) =>\n        slots.filter((slot) => slot.kind === \"digit\").map((slot) => Number(slot.character));\n\n    export const compareDigits = (previous: number[], next: number[]): OdometerDirection => {\n        if (previous.length !== next.length) return next.length > previous.length ? \"up\" : \"down\";\n\n        for (let index = NOTHING; index < next.length; index++) {\n            if (next[index] === previous[index]) continue;\n\n            return next[index] > previous[index] ? \"up\" : \"down\";\n        }\n\n        return \"same\";\n    };\n\n    export const getRestingAngle = (digit: number) => RotationUtils.getIndexAngle(digit, DIGIT_COUNT);\n\n    export const computeStepDelta = (previous: number, next: number, direction: OdometerDirection) => {\n        if (direction === \"down\") return -(((previous - next) % DIGIT_COUNT) + DIGIT_COUNT) % DIGIT_COUNT;\n\n        return (((next - previous) % DIGIT_COUNT) + DIGIT_COUNT) % DIGIT_COUNT;\n    };\n\n    export const computeAngleDelta = (previous: number, next: number, direction: OdometerDirection) =>\n        -computeStepDelta(previous, next, direction) * RotationUtils.getStepAngle(DIGIT_COUNT);\n\n    export const computeCascadeDelays = (previous: number[], next: number[], delayMs: number) =>\n        next.map((_unused, index) => {\n            const behind = next\n                .slice(index + SINGLE)\n                .filter((digit, offset) => digit !== previous[index + SINGLE + offset]);\n\n            return behind.length * delayMs;\n        });\n}\n"],"mappings":";;AAIA,IAAM,cAAc;AACpB,IAAM,UAAU;AAChB,IAAM,SAAS;AACf,IAAM,WAAW;AAEjB,IAAa,kBAAkB,MAAM,KAAK,EAAE,QAAQ,YAAY,IAAI,SAAS,UAAU,OAAO,KAAK,CAAC;AAE7F,IAAU;CAAV,SAAA,gBAAA;CACU,eAAA,YAAY,SAAiC;EACtD,IAAI,aAAa;EAEjB,OAAO,MAAM,KAAK,IAAI,CAAC,CAAC,KAAK,cAAc;GACvC,MAAM,UAAU,aAAa,OAAO,aAAa;GAEjD,IAAI,SAAS,cAAc;GAE3B,OAAO;IACH,MAAM,UAAU,UAAU;IAC1B;IACA,YAAY,UAAU,aAAa;GACvC;EACJ,CAAC;CACL;CAEa,eAAA,aAAa,UACtB,MAAM,QAAQ,SAAS,KAAK,SAAS,OAAO,CAAC,CAAC,KAAK,SAAS,OAAO,KAAK,SAAS,CAAC;CAEzE,eAAA,iBAAiB,UAAoB,SAAsC;EACpF,IAAI,SAAS,WAAW,KAAK,QAAQ,OAAO,KAAK,SAAS,SAAS,SAAS,OAAO;EAEnF,KAAK,IAAI,QAAQ,SAAS,QAAQ,KAAK,QAAQ,SAAS;GACpD,IAAI,KAAK,WAAW,SAAS,QAAQ;GAErC,OAAO,KAAK,SAAS,SAAS,SAAS,OAAO;EAClD;EAEA,OAAO;CACX;CAEa,eAAA,mBAAmB,UAAkB,cAAc,cAAc,OAAO,WAAW;CAEzF,MAAM,mBAAA,eAAA,oBAAoB,UAAkB,MAAc,cAAiC;EAC9F,IAAI,cAAc,QAAQ,OAAO,GAAI,WAAW,QAAQ,cAAe,eAAe;EAEtF,SAAU,OAAO,YAAY,cAAe,eAAe;CAC/D;CAEa,eAAA,qBAAqB,UAAkB,MAAc,cAC9D,CAAC,iBAAiB,UAAU,MAAM,SAAS,IAAI,cAAc,aAAa,WAAW;CAE5E,eAAA,wBAAwB,UAAoB,MAAgB,YACrE,KAAK,KAAK,SAAS,UAAU;EAKzB,OAJe,KACV,MAAM,QAAQ,MAAM,CAAC,CACrB,QAAQ,OAAO,WAAW,UAAU,SAAS,QAAQ,SAAS,OAE5D,CAAA,CAAO,SAAS;CAC3B,CAAC;AACR,EAAA,CAAA,kBAAA,gBAAA,CAAA,EAAD"}

package/dist/Exotics/OverheadWheel/OverheadWheel.js

@@ -0,0 +1,8 @@
+import { Wheel } from "../Wheel/Wheel.js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/Exotics/OverheadWheel/OverheadWheel.tsx
+var OverheadWheel = (props) => createComponent(Wheel, mergeProps(props, { variant: "overhead" }));
+//#endregion
+export { OverheadWheel };
+
+//# sourceMappingURL=OverheadWheel.js.map

package/dist/Exotics/OverheadWheel/OverheadWheel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverheadWheel.js","names":["Wheel","OverheadWheelProps","OverheadWheel","props","T","_$createComponent","_$mergeProps","variant"],"sources":["../../../src/Exotics/OverheadWheel/OverheadWheel.tsx"],"sourcesContent":["import { Wheel } from \"../Wheel/Wheel\";\nimport type { OverheadWheelProps } from \"../Wheel/Wheel.types\";\n\nexport const OverheadWheel = <T,>(props: OverheadWheelProps<T>) => <Wheel<T> {...props} variant={\"overhead\"} />;\n"],"mappings":";;;AAGA,IAAaE,iBAAqBC,UAA4BE,gBAAML,OAAKM,WAAQH,OAAK,EAAEI,SAAS,WAAU,CAAA,CAAA"}

package/dist/Exotics/PatchBoard/PatchBoard.css.js

@@ -0,0 +1,13 @@
+/* empty css                              */
+//#region src/Exotics/PatchBoard/PatchBoard.css.ts
+var patchBoardRoot = "_1ca7o490";
+var patchBoardCables = "_1ca7o491";
+var patchBoardSlot = "_1ca7o492";
+var patchBoardNodeHolder = "_1ca7o493";
+var patchBoardNode = "_1ca7o494";
+var patchBoardSocketHolder = "_1ca7o495";
+var patchBoardSocket = "_1ca7o496";
+//#endregion
+export { patchBoardCables, patchBoardNode, patchBoardNodeHolder, patchBoardRoot, patchBoardSlot, patchBoardSocket, patchBoardSocketHolder };
+
+//# sourceMappingURL=PatchBoard.css.js.map

package/dist/Exotics/PatchBoard/PatchBoard.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatchBoard.css.js","names":[],"sources":["../../../src/Exotics/PatchBoard/PatchBoard.css.ts"],"sourcesContent":["import { globalStyle, style } from \"@vanilla-extract/css\";\n\nexport const patchBoardRoot = style({\n    display: \"block\",\n    position: \"relative\",\n    pointerEvents: \"all\",\n});\n\nexport const patchBoardCables = style({\n    position: \"absolute\",\n    inset: 0,\n    width: \"100%\",\n    height: \"100%\",\n    overflow: \"visible\",\n    pointerEvents: \"none\",\n});\n\nexport const patchBoardSlot = style({\n    position: \"absolute\",\n    pointerEvents: \"none\",\n});\n\nexport const patchBoardNodeHolder = style({\n    position: \"absolute\",\n    inset: 0,\n    pointerEvents: \"all\",\n});\n\nglobalStyle(`${patchBoardNodeHolder} > *`, {\n    width: \"100%\",\n    height: \"100%\",\n});\n\nexport const patchBoardNode = style({\n    display: \"flex\",\n    flex: \"1 1 auto\",\n    minWidth: 0,\n    position: \"relative\",\n    touchAction: \"none\",\n    pointerEvents: \"all\",\n});\n\nexport const patchBoardSocketHolder = style({\n    position: \"absolute\",\n    transform: \"translate(-50%, -50%)\",\n    pointerEvents: \"all\",\n});\n\nglobalStyle(`${patchBoardSocketHolder} > *`, {\n    width: \"100%\",\n    height: \"100%\",\n});\n\nexport const patchBoardSocket = style({\n    display: \"flex\",\n    flex: \"1 1 auto\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    minWidth: 0,\n    touchAction: \"none\",\n    pointerEvents: \"all\",\n});\n"],"mappings":""}