@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Exotics/Bracket/Bracket.js

@@ -0,0 +1,190 @@
+import { access } from "../../Utils/propUtils.js";
+import { BracketUtils } from "./Bracket.utils.js";
+import { bracketConnectors, bracketItem, bracketList, bracketNode, bracketRoot } from "./Bracket.css.js";
+import { For, Index, createMemo, createSignal, createUniqueId } from "solid-js";
+import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, setStyleProperty, template, use } from "solid-js/web";
+//#region src/Exotics/Bracket/Bracket.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><svg aria-hidden=true></svg><ul>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<li><div role=button>`);
+var DEFAULT_LAYER_GAP = 40;
+var DEFAULT_CROSS_GAP = 12;
+var DEFAULT_ORIENTATION = "horizontal";
+var DEFAULT_ROOT_SIDE = "end";
+var HALF = .5;
+var NOTHING = 0;
+var SINGLE = 1;
+var ACTIVATION_KEYS = ["Enter", " "];
+var Bracket = (props) => {
+	const boardId = createUniqueId();
+	const [getNodeRefs, setNodeRefs] = createSignal({});
+	const [getFocusedId, setFocusedId] = createSignal();
+	const getRootNode = createMemo(() => access(props.root));
+	const getLayout = createMemo(() => BracketUtils.computeLayout(getRootNode()));
+	const getNodeSize = createMemo(() => access(props.nodeSize));
+	const getLayerGap = createMemo(() => access(props.layerGap) ?? DEFAULT_LAYER_GAP);
+	const getCrossGap = createMemo(() => access(props.crossGap) ?? DEFAULT_CROSS_GAP);
+	const getOrientation = createMemo(() => access(props.orientation) ?? DEFAULT_ORIENTATION);
+	const getRootSide = createMemo(() => access(props.rootSide) ?? DEFAULT_ROOT_SIDE);
+	const getIsHorizontal = createMemo(() => getOrientation() === "horizontal");
+	const getLayerExtent = createMemo(() => getIsHorizontal() ? getNodeSize().width : getNodeSize().height);
+	const getCrossExtent = createMemo(() => getIsHorizontal() ? getNodeSize().height : getNodeSize().width);
+	const getLayerPitch = createMemo(() => getLayerExtent() + getLayerGap());
+	const getCrossPitch = createMemo(() => getCrossExtent() + getCrossGap());
+	const getLayerSpan = createMemo(() => getLayout().layerCount * getLayerPitch() - getLayerGap());
+	const getCrossSpan = createMemo(() => getLayout().leafCount * getCrossPitch() - getCrossGap());
+	const getBoardSize = createMemo(() => getIsHorizontal() ? {
+		width: getLayerSpan(),
+		height: getCrossSpan()
+	} : {
+		width: getCrossSpan(),
+		height: getLayerSpan()
+	});
+	const getNodeAt = (id) => {
+		return id.split(".").slice(SINGLE).map(Number).reduce((node, index) => node.children[index], getRootNode());
+	};
+	const getLayerStart = (placement) => {
+		const fromStart = placement.layer * getLayerPitch();
+		return getRootSide() === "start" ? fromStart : getLayerSpan() - fromStart - getLayerExtent();
+	};
+	const getCrossStart = (placement) => placement.cross * getCrossPitch();
+	const getInset = (placement) => getIsHorizontal() ? {
+		left: getLayerStart(placement),
+		top: getCrossStart(placement)
+	} : {
+		left: getCrossStart(placement),
+		top: getLayerStart(placement)
+	};
+	const getCrossCentre = (placement) => getCrossStart(placement) + getCrossExtent() * HALF;
+	const getFacingEdge = (placement, isTowardRoot) => BracketUtils.getFacingEdge(getLayerStart(placement), getLayerExtent(), getRootSide(), isTowardRoot);
+	const getPoint = (along, across) => getIsHorizontal() ? {
+		x: along,
+		y: across
+	} : {
+		x: across,
+		y: along
+	};
+	const getConnectors = createMemo(() => getLayout().placements.filter((placement) => placement.childIds.length > NOTHING).flatMap((placement) => {
+		const from = getPoint(getFacingEdge(placement, false), getCrossCentre(placement));
+		return placement.childIds.flatMap((childId) => {
+			const child = BracketUtils.findPlacement(getLayout().placements, childId);
+			if (!child) return [];
+			return [{
+				id: `${boardId}-${placement.id}-${childId}`,
+				parentId: placement.id,
+				childId,
+				orientation: getOrientation(),
+				from,
+				to: getPoint(getFacingEdge(child, true), getCrossCentre(child))
+			}];
+		});
+	}));
+	const getStops = createMemo(() => getLayout().placements.filter((placement) => !placement.isDisabled));
+	const getRovingId = createMemo(() => {
+		const stops = getStops();
+		const focused = getFocusedId();
+		if (focused !== void 0 && stops.some((placement) => placement.id === focused)) return focused;
+		return stops[NOTHING]?.id;
+	});
+	const setNodeRef = (id, element) => {
+		setNodeRefs((previous) => ({
+			...previous,
+			[id]: element
+		}));
+	};
+	const getStepForKey = (key) => {
+		const alongLayers = getIsHorizontal() ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+		if (key === (getRootSide() === "start" ? alongLayers[NOTHING] : alongLayers[SINGLE])) return "toRoot";
+		if (alongLayers.includes(key)) return "toLeaves";
+		if (key === "Home") return "first";
+		if (key === "End") return "last";
+		const acrossLayer = getIsHorizontal() ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+		if (key === acrossLayer[NOTHING]) return "previous";
+		if (key === acrossLayer[SINGLE]) return "next";
+	};
+	const handleKeyDown = (e) => {
+		const from = getRovingId();
+		if (from === void 0) return;
+		if (ACTIVATION_KEYS.includes(e.key)) {
+			e.preventDefault();
+			props.onActivate?.(getNodeAt(from).value);
+			return;
+		}
+		const step = getStepForKey(e.key);
+		if (step === void 0) return;
+		const next = BracketUtils.computeStepId(step, from, getStops());
+		if (next === void 0) return;
+		e.preventDefault();
+		setFocusedId(next);
+		getNodeRefs()[next]?.focus();
+	};
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+		_el$.$$keydown = handleKeyDown;
+		className(_el$, bracketRoot);
+		setAttribute(_el$2, "class", bracketConnectors);
+		insert(_el$2, createComponent(Index, {
+			get each() {
+				return getConnectors();
+			},
+			children: (getDefs) => memo(() => props.renderConnector?.(getDefs))
+		}));
+		className(_el$3, bracketList);
+		insert(_el$3, createComponent(For, {
+			get each() {
+				return getLayout().placements;
+			},
+			children: (placement) => (() => {
+				var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
+				className(_el$4, bracketItem);
+				_el$5.$$click = () => {
+					if (placement.isDisabled) return;
+					setFocusedId(placement.id);
+					props.onActivate?.(getNodeAt(placement.id).value);
+				};
+				use((element) => setNodeRef(placement.id, element), _el$5);
+				className(_el$5, bracketNode);
+				insert(_el$5, () => props.renderNode(() => getNodeAt(placement.id), () => ({
+					placement,
+					isFocused: getFocusedId() === placement.id
+				})));
+				effect((_p$) => {
+					var _v$5 = `${getInset(placement).left}px`, _v$6 = `${getInset(placement).top}px`, _v$7 = `${getNodeSize().width}px`, _v$8 = `${getNodeSize().height}px`, _v$9 = placement.isDisabled || placement.id !== getRovingId() ? void 0 : 0, _v$0 = placement.isDisabled || void 0;
+					_v$5 !== _p$.e && setStyleProperty(_el$4, "left", _p$.e = _v$5);
+					_v$6 !== _p$.t && setStyleProperty(_el$4, "top", _p$.t = _v$6);
+					_v$7 !== _p$.a && setStyleProperty(_el$4, "width", _p$.a = _v$7);
+					_v$8 !== _p$.o && setStyleProperty(_el$4, "height", _p$.o = _v$8);
+					_v$9 !== _p$.i && setAttribute(_el$5, "tabindex", _p$.i = _v$9);
+					_v$0 !== _p$.n && setAttribute(_el$5, "aria-disabled", _p$.n = _v$0);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0,
+					i: void 0,
+					n: void 0
+				});
+				return _el$4;
+			})()
+		}));
+		effect((_p$) => {
+			var _v$ = `${getBoardSize().width}px`, _v$2 = `${getBoardSize().height}px`, _v$3 = `0 0 ${getBoardSize().width} ${getBoardSize().height}`, _v$4 = access(props.ariaLabel);
+			_v$ !== _p$.e && setStyleProperty(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$, "height", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$2, "viewBox", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$3, "aria-label", _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+};
+delegateEvents(["keydown", "click"]);
+//#endregion
+export { Bracket };
+
+//# sourceMappingURL=Bracket.js.map

package/dist/Exotics/Bracket/Bracket.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bracket.js","names":["For","Index","createMemo","createSignal","createUniqueId","access","BracketConnectorDefs","BracketNode","BracketOrientation","BracketPlacement","BracketProps","BracketRootSide","BracketStep","BracketUtils","styles","DEFAULT_LAYER_GAP","DEFAULT_CROSS_GAP","DEFAULT_ORIENTATION","DEFAULT_ROOT_SIDE","HALF","NOTHING","SINGLE","ACTIVATION_KEYS","Bracket","props","T","boardId","getNodeRefs","setNodeRefs","Record","HTMLElement","getFocusedId","setFocusedId","getRootNode","root","getLayout","computeLayout","getNodeSize","nodeSize","getLayerGap","layerGap","getCrossGap","crossGap","getOrientation","orientation","getRootSide","rootSide","getIsHorizontal","getLayerExtent","width","height","getCrossExtent","getLayerPitch","getCrossPitch","getLayerSpan","layerCount","getCrossSpan","leafCount","getBoardSize","getNodeAt","id","path","split","slice","map","Number","reduce","node","index","children","getLayerStart","placement","fromStart","layer","getCrossStart","cross","getInset","left","top","getCrossCentre","getFacingEdge","isTowardRoot","getPoint","along","across","x","y","getConnectors","placements","filter","childIds","length","flatMap","from","childId","child","findPlacement","parentId","to","getStops","isDisabled","getRovingId","stops","focused","undefined","some","setNodeRef","element","previous","getStepForKey","key","alongLayers","towardRoot","includes","acrossLayer","handleKeyDown","e","KeyboardEvent","preventDefault","onActivate","value","step","next","computeStepId","focus","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","$$keydown","_$className","bracketRoot","_$setAttribute","bracketConnectors","_$insert","_$createComponent","each","getDefs","_$memo","renderConnector","bracketList","_el$4","_tmpl$2","_el$5","bracketItem","$$click","_$use","bracketNode","renderNode","isFocused","_$effect","_p$","_v$5","_v$6","_v$7","_v$8","_v$9","_v$0","_$setStyleProperty","t","a","o","i","n","_v$","_v$2","_v$3","_v$4","ariaLabel","_$delegateEvents"],"sources":["../../../src/Exotics/Bracket/Bracket.tsx"],"sourcesContent":["import { For, Index, createMemo, createSignal, createUniqueId } from \"solid-js\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport type {\n    BracketConnectorDefs,\n    BracketNode,\n    BracketOrientation,\n    BracketPlacement,\n    BracketProps,\n    BracketRootSide,\n    BracketStep,\n} from \"./Bracket.types\";\nimport { BracketUtils } from \"./Bracket.utils\";\n\nimport * as styles from \"./Bracket.css\";\n\nconst DEFAULT_LAYER_GAP = 40;\nconst DEFAULT_CROSS_GAP = 12;\nconst DEFAULT_ORIENTATION: BracketOrientation = \"horizontal\";\nconst DEFAULT_ROOT_SIDE: BracketRootSide = \"end\";\nconst HALF = 0.5;\nconst NOTHING = 0;\nconst SINGLE = 1;\n\nconst ACTIVATION_KEYS = [\"Enter\", \" \"];\n\nexport const Bracket = <T,>(props: BracketProps<T>) => {\n    const boardId = createUniqueId();\n\n    const [getNodeRefs, setNodeRefs] = createSignal<Record<string, HTMLElement | undefined>>({});\n    const [getFocusedId, setFocusedId] = createSignal<string>();\n\n    const getRootNode = createMemo(() => access(props.root));\n\n    const getLayout = createMemo(() => BracketUtils.computeLayout(getRootNode()));\n\n    const getNodeSize = createMemo(() => access(props.nodeSize));\n\n    const getLayerGap = createMemo(() => access(props.layerGap) ?? DEFAULT_LAYER_GAP);\n\n    const getCrossGap = createMemo(() => access(props.crossGap) ?? DEFAULT_CROSS_GAP);\n\n    const getOrientation = createMemo(() => access(props.orientation) ?? DEFAULT_ORIENTATION);\n\n    const getRootSide = createMemo(() => access(props.rootSide) ?? DEFAULT_ROOT_SIDE);\n\n    const getIsHorizontal = createMemo(() => getOrientation() === \"horizontal\");\n\n    const getLayerExtent = createMemo(() => (getIsHorizontal() ? getNodeSize().width : getNodeSize().height));\n\n    const getCrossExtent = createMemo(() => (getIsHorizontal() ? getNodeSize().height : getNodeSize().width));\n\n    const getLayerPitch = createMemo(() => getLayerExtent() + getLayerGap());\n\n    const getCrossPitch = createMemo(() => getCrossExtent() + getCrossGap());\n\n    const getLayerSpan = createMemo(() => getLayout().layerCount * getLayerPitch() - getLayerGap());\n\n    const getCrossSpan = createMemo(() => getLayout().leafCount * getCrossPitch() - getCrossGap());\n\n    const getBoardSize = createMemo(() =>\n        getIsHorizontal()\n            ? { width: getLayerSpan(), height: getCrossSpan() }\n            : { width: getCrossSpan(), height: getLayerSpan() },\n    );\n\n    const getNodeAt = (id: string): BracketNode<T> => {\n        const path = id.split(\".\").slice(SINGLE).map(Number);\n\n        return path.reduce<BracketNode<T>>((node, index) => node.children![index], getRootNode());\n    };\n\n    const getLayerStart = (placement: BracketPlacement) => {\n        const fromStart = placement.layer * getLayerPitch();\n\n        return getRootSide() === \"start\" ? fromStart : getLayerSpan() - fromStart - getLayerExtent();\n    };\n\n    const getCrossStart = (placement: BracketPlacement) => placement.cross * getCrossPitch();\n\n    const getInset = (placement: BracketPlacement) =>\n        getIsHorizontal()\n            ? { left: getLayerStart(placement), top: getCrossStart(placement) }\n            : { left: getCrossStart(placement), top: getLayerStart(placement) };\n\n    const getCrossCentre = (placement: BracketPlacement) => getCrossStart(placement) + getCrossExtent() * HALF;\n\n    const getFacingEdge = (placement: BracketPlacement, isTowardRoot: boolean) =>\n        BracketUtils.getFacingEdge(getLayerStart(placement), getLayerExtent(), getRootSide(), isTowardRoot);\n\n    const getPoint = (along: number, across: number) =>\n        getIsHorizontal() ? { x: along, y: across } : { x: across, y: along };\n\n    const getConnectors = createMemo((): BracketConnectorDefs[] =>\n        getLayout()\n            .placements.filter((placement) => placement.childIds.length > NOTHING)\n            .flatMap((placement) => {\n                const from = getPoint(getFacingEdge(placement, false), getCrossCentre(placement));\n\n                return placement.childIds.flatMap((childId) => {\n                    const child = BracketUtils.findPlacement(getLayout().placements, childId);\n\n                    if (!child) return [];\n\n                    return [\n                        {\n                            id: `${boardId}-${placement.id}-${childId}`,\n                            parentId: placement.id,\n                            childId,\n                            orientation: getOrientation(),\n                            from,\n                            to: getPoint(getFacingEdge(child, true), getCrossCentre(child)),\n                        },\n                    ];\n                });\n            }),\n    );\n\n    const getStops = createMemo(() => getLayout().placements.filter((placement) => !placement.isDisabled));\n\n    const getRovingId = createMemo(() => {\n        const stops = getStops();\n        const focused = getFocusedId();\n\n        if (focused !== undefined && stops.some((placement) => placement.id === focused)) return focused;\n\n        return stops[NOTHING]?.id;\n    });\n\n    const setNodeRef = (id: string, element: HTMLElement) => {\n        setNodeRefs((previous) => ({ ...previous, [id]: element }));\n    };\n\n    const getStepForKey = (key: string): BracketStep | undefined => {\n        const alongLayers = getIsHorizontal() ? [\"ArrowLeft\", \"ArrowRight\"] : [\"ArrowUp\", \"ArrowDown\"];\n        const towardRoot = getRootSide() === \"start\" ? alongLayers[NOTHING] : alongLayers[SINGLE];\n\n        if (key === towardRoot) return \"toRoot\";\n        if (alongLayers.includes(key)) return \"toLeaves\";\n        if (key === \"Home\") return \"first\";\n        if (key === \"End\") return \"last\";\n\n        const acrossLayer = getIsHorizontal() ? [\"ArrowUp\", \"ArrowDown\"] : [\"ArrowLeft\", \"ArrowRight\"];\n\n        if (key === acrossLayer[NOTHING]) return \"previous\";\n        if (key === acrossLayer[SINGLE]) return \"next\";\n    };\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n        const from = getRovingId();\n\n        if (from === undefined) return;\n\n        if (ACTIVATION_KEYS.includes(e.key)) {\n            e.preventDefault();\n            props.onActivate?.(getNodeAt(from).value);\n\n            return;\n        }\n\n        const step = getStepForKey(e.key);\n\n        if (step === undefined) return;\n\n        const next = BracketUtils.computeStepId(step, from, getStops());\n\n        if (next === undefined) return;\n\n        e.preventDefault();\n        setFocusedId(next);\n        getNodeRefs()[next]?.focus();\n    };\n\n    return (\n        <div\n            class={styles.bracketRoot}\n            style={{ width: `${getBoardSize().width}px`, height: `${getBoardSize().height}px` }}\n            onKeyDown={handleKeyDown}\n        >\n            <svg\n                class={styles.bracketConnectors}\n                viewBox={`0 0 ${getBoardSize().width} ${getBoardSize().height}`}\n                aria-hidden=\"true\"\n            >\n                <Index each={getConnectors()}>{(getDefs) => <>{props.renderConnector?.(getDefs)}</>}</Index>\n            </svg>\n\n            <ul class={styles.bracketList} aria-label={access(props.ariaLabel)}>\n                <For each={getLayout().placements}>\n                    {(placement) => (\n                        <li\n                            class={styles.bracketItem}\n                            style={{\n                                left: `${getInset(placement).left}px`,\n                                top: `${getInset(placement).top}px`,\n                                width: `${getNodeSize().width}px`,\n                                height: `${getNodeSize().height}px`,\n                            }}\n                        >\n                            <div\n                                ref={(element) => setNodeRef(placement.id, element)}\n                                class={styles.bracketNode}\n                                role=\"button\"\n                                tabindex={placement.isDisabled || placement.id !== getRovingId() ? undefined : 0}\n                                aria-disabled={placement.isDisabled || undefined}\n                                onClick={() => {\n                                    if (placement.isDisabled) return;\n\n                                    setFocusedId(placement.id);\n                                    props.onActivate?.(getNodeAt(placement.id).value);\n                                }}\n                            >\n                                {props.renderNode(\n                                    () => getNodeAt(placement.id),\n                                    () => ({ placement, isFocused: getFocusedId() === placement.id }),\n                                )}\n                            </div>\n                        </li>\n                    )}\n                </For>\n            </ul>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Exotics/Bracket/Bracket.utils.js

@@ -0,0 +1,58 @@
+//#region src/Exotics/Bracket/Bracket.utils.ts
+var ROOT_ID = "0";
+var FIRST_LAYER = 0;
+var NOTHING = 0;
+var SINGLE = 1;
+var HALF = .5;
+var BracketUtils;
+(function(_BracketUtils) {
+	_BracketUtils.computeLayout = (root) => {
+		const placements = [];
+		let leafCount = NOTHING;
+		let layerCount = NOTHING;
+		const walk = (node, id, parentId, layer) => {
+			const children = node.children ?? [];
+			const childIds = children.map((_unused, index) => `${id}.${index}`);
+			layerCount = Math.max(layerCount, layer + SINGLE);
+			const crosses = children.map((child, index) => walk(child, childIds[index], id, layer + SINGLE));
+			const cross = crosses.length ? (crosses[NOTHING] + crosses[crosses.length - SINGLE]) * HALF : leafCount++;
+			placements.push({
+				id,
+				parentId,
+				childIds,
+				layer,
+				cross,
+				isDisabled: node.isDisabled ?? false
+			});
+			return cross;
+		};
+		walk(root, ROOT_ID, void 0, FIRST_LAYER);
+		return {
+			placements: placements.sort(compareByPlace),
+			layerCount,
+			leafCount
+		};
+	};
+	_BracketUtils.getFacingEdge = (layerStart, layerExtent, rootSide, isTowardRoot) => layerStart + (rootSide === "start" !== isTowardRoot ? layerExtent : NOTHING);
+	const compareByPlace = _BracketUtils.compareByPlace = (first, second) => first.layer - second.layer || first.cross - second.cross;
+	const findPlacement = _BracketUtils.findPlacement = (placements, id) => placements.find((placement) => placement.id === id);
+	const getLayerPlacements = _BracketUtils.getLayerPlacements = (placements, layer) => placements.filter((placement) => placement.layer === layer).sort(compareByPlace);
+	_BracketUtils.computeStepId = (step, fromId, placements) => {
+		const from = findPlacement(placements, fromId);
+		if (!from) return void 0;
+		if (step === "toRoot") return from.parentId;
+		if (step === "toLeaves") {
+			if (!from.childIds.length) return void 0;
+			return from.childIds[Math.floor((from.childIds.length - SINGLE) * HALF)];
+		}
+		const layer = getLayerPlacements(placements, from.layer);
+		const at = layer.findIndex((placement) => placement.id === fromId);
+		if (step === "first") return layer[NOTHING]?.id;
+		if (step === "last") return layer[layer.length - SINGLE]?.id;
+		return layer[step === "next" ? at + SINGLE : at - SINGLE]?.id;
+	};
+})(BracketUtils || (BracketUtils = {}));
+//#endregion
+export { BracketUtils };
+
+//# sourceMappingURL=Bracket.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Bracket.utils.js","names":[],"sources":["../../../src/Exotics/Bracket/Bracket.utils.ts"],"sourcesContent":["import type { BracketLayout, BracketNode, BracketPlacement, BracketRootSide, BracketStep } from \"./Bracket.types\";\n\nconst ROOT_ID = \"0\";\nconst FIRST_LAYER = 0;\nconst NOTHING = 0;\nconst SINGLE = 1;\nconst HALF = 0.5;\n\nexport namespace BracketUtils {\n    export const computeLayout = <T>(root: BracketNode<T>): BracketLayout => {\n        const placements: BracketPlacement[] = [];\n\n        let leafCount = NOTHING;\n        let layerCount = NOTHING;\n\n        const walk = (node: BracketNode<T>, id: string, parentId: string | undefined, layer: number): number => {\n            const children = node.children ?? [];\n            const childIds = children.map((_unused, index) => `${id}.${index}`);\n\n            layerCount = Math.max(layerCount, layer + SINGLE);\n\n            const crosses = children.map((child, index) => walk(child, childIds[index], id, layer + SINGLE));\n            const cross = crosses.length ? (crosses[NOTHING] + crosses[crosses.length - SINGLE]) * HALF : leafCount++;\n\n            placements.push({ id, parentId, childIds, layer, cross, isDisabled: node.isDisabled ?? false });\n\n            return cross;\n        };\n\n        walk(root, ROOT_ID, undefined, FIRST_LAYER);\n\n        return { placements: placements.sort(compareByPlace), layerCount, leafCount };\n    };\n\n    export const getFacingEdge = (\n        layerStart: number,\n        layerExtent: number,\n        rootSide: BracketRootSide,\n        isTowardRoot: boolean,\n    ) => layerStart + ((rootSide === \"start\") !== isTowardRoot ? layerExtent : NOTHING);\n\n    export const compareByPlace = (first: BracketPlacement, second: BracketPlacement) =>\n        first.layer - second.layer || first.cross - second.cross;\n\n    export const findPlacement = (placements: BracketPlacement[], id: string | undefined) =>\n        placements.find((placement) => placement.id === id);\n\n    export const getLayerPlacements = (placements: BracketPlacement[], layer: number) =>\n        placements.filter((placement) => placement.layer === layer).sort(compareByPlace);\n\n    export const computeStepId = (step: BracketStep, fromId: string, placements: BracketPlacement[]) => {\n        const from = findPlacement(placements, fromId);\n\n        if (!from) return undefined;\n\n        if (step === \"toRoot\") return from.parentId;\n\n        if (step === \"toLeaves\") {\n            if (!from.childIds.length) return undefined;\n\n            return from.childIds[Math.floor((from.childIds.length - SINGLE) * HALF)];\n        }\n\n        const layer = getLayerPlacements(placements, from.layer);\n        const at = layer.findIndex((placement) => placement.id === fromId);\n\n        if (step === \"first\") return layer[NOTHING]?.id;\n        if (step === \"last\") return layer[layer.length - SINGLE]?.id;\n\n        const next = step === \"next\" ? at + SINGLE : at - SINGLE;\n\n        return layer[next]?.id;\n    };\n}\n"],"mappings":";AAEA,IAAM,UAAU;AAChB,IAAM,cAAc;AACpB,IAAM,UAAU;AAChB,IAAM,SAAS;AACf,IAAM,OAAO;AAEN,IAAU;CAAV,SAAA,eAAA;CACU,cAAA,iBAAoB,SAAwC;EACrE,MAAM,aAAiC,CAAC;EAExC,IAAI,YAAY;EAChB,IAAI,aAAa;EAEjB,MAAM,QAAQ,MAAsB,IAAY,UAA8B,UAA0B;GACpG,MAAM,WAAW,KAAK,YAAY,CAAC;GACnC,MAAM,WAAW,SAAS,KAAK,SAAS,UAAU,GAAG,GAAG,GAAG,OAAO;GAElE,aAAa,KAAK,IAAI,YAAY,QAAQ,MAAM;GAEhD,MAAM,UAAU,SAAS,KAAK,OAAO,UAAU,KAAK,OAAO,SAAS,QAAQ,IAAI,QAAQ,MAAM,CAAC;GAC/F,MAAM,QAAQ,QAAQ,UAAU,QAAQ,WAAW,QAAQ,QAAQ,SAAS,WAAW,OAAO;GAE9F,WAAW,KAAK;IAAE;IAAI;IAAU;IAAU;IAAO;IAAO,YAAY,KAAK,cAAc;GAAM,CAAC;GAE9F,OAAO;EACX;EAEA,KAAK,MAAM,SAAS,KAAA,GAAW,WAAW;EAE1C,OAAO;GAAE,YAAY,WAAW,KAAK,cAAc;GAAG;GAAY;EAAU;CAChF;CAEa,cAAA,iBACT,YACA,aACA,UACA,iBACC,cAAe,aAAa,YAAa,eAAe,cAAc;CAEpE,MAAM,iBAAA,cAAA,kBAAkB,OAAyB,WACpD,MAAM,QAAQ,OAAO,SAAS,MAAM,QAAQ,OAAO;CAEhD,MAAM,gBAAA,cAAA,iBAAiB,YAAgC,OAC1D,WAAW,MAAM,cAAc,UAAU,OAAO,EAAE;CAE/C,MAAM,qBAAA,cAAA,sBAAsB,YAAgC,UAC/D,WAAW,QAAQ,cAAc,UAAU,UAAU,KAAK,CAAC,CAAC,KAAK,cAAc;CAEtE,cAAA,iBAAiB,MAAmB,QAAgB,eAAmC;EAChG,MAAM,OAAO,cAAc,YAAY,MAAM;EAE7C,IAAI,CAAC,MAAM,OAAO,KAAA;EAElB,IAAI,SAAS,UAAU,OAAO,KAAK;EAEnC,IAAI,SAAS,YAAY;GACrB,IAAI,CAAC,KAAK,SAAS,QAAQ,OAAO,KAAA;GAElC,OAAO,KAAK,SAAS,KAAK,OAAO,KAAK,SAAS,SAAS,UAAU,IAAI;EAC1E;EAEA,MAAM,QAAQ,mBAAmB,YAAY,KAAK,KAAK;EACvD,MAAM,KAAK,MAAM,WAAW,cAAc,UAAU,OAAO,MAAM;EAEjE,IAAI,SAAS,SAAS,OAAO,MAAM,QAAQ,EAAE;EAC7C,IAAI,SAAS,QAAQ,OAAO,MAAM,MAAM,SAAS,OAAO,EAAE;EAI1D,OAAO,MAFM,SAAS,SAAS,KAAK,SAAS,KAAK,OAEhC,EAAE;CACxB;AACH,EAAA,CAAA,iBAAA,eAAA,CAAA,EAAD"}

package/dist/Exotics/CellAnimation/CellAnimation.css.js

@@ -0,0 +1,12 @@
+/* empty css                                 */
+//#region src/Exotics/CellAnimation/CellAnimation.css.ts
+var cellAnimationRoot = "_1yl7qaf0";
+var cellAnimationAnchor = "_1yl7qaf1";
+var cellSrcVar = "var(--_1yl7qaf2)";
+var cellSizeVar = "var(--_1yl7qaf3)";
+var cellAnimationContainer = "_1yl7qaf4";
+var cellAnimationCell = "_1yl7qaf5";
+//#endregion
+export { cellAnimationAnchor, cellAnimationCell, cellAnimationContainer, cellAnimationRoot, cellSizeVar, cellSrcVar };
+
+//# sourceMappingURL=CellAnimation.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CellAnimation.css.js","names":[],"sources":["../../../src/Exotics/CellAnimation/CellAnimation.css.ts"],"sourcesContent":["import { createVar, style } from \"@vanilla-extract/css\";\n\nexport const cellAnimationRoot = style({\n    position: \"relative\",\n    width: \"100%\",\n    height: \"100%\",\n});\n\nexport const cellAnimationAnchor = style({\n    position: \"absolute\",\n    opacity: 0,\n});\n\nexport const cellSrcVar = createVar();\nexport const cellSizeVar = createVar();\n\nexport const cellAnimationContainer = style({\n    position: \"relative\",\n    overflow: \"hidden\",\n    isolation: \"isolate\",\n});\n\nexport const cellAnimationCell = style({\n    position: \"absolute\",\n    backgroundImage: cellSrcVar,\n    backgroundSize: cellSizeVar,\n    backgroundRepeat: \"no-repeat\",\n    transformOrigin: \"center center\",\n});\n"],"mappings":""}

package/dist/Exotics/CellAnimation/CellAnimation.js

@@ -0,0 +1,224 @@
+import { access } from "../../Utils/propUtils.js";
+import { SignalMirror } from "../../Abstracts/SignalMirror/SignalMirror.js";
+import { assignInlineVars } from "../../_external/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import { CellAnimationUtils } from "./CellAnimation.utils.js";
+import { cellAnimationAnchor, cellAnimationCell, cellAnimationContainer, cellAnimationRoot, cellSizeVar, cellSrcVar } from "./CellAnimation.css.js";
+import { For, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import { MathUtils } from "@thewaver/ss-utils";
+import { className, createComponent, effect, insert, setAttribute, setStyleProperty, style, template, use } from "solid-js/web";
+//#region src/Exotics/CellAnimation/CellAnimation.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><img aria-hidden=true><div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div aria-hidden=true>`);
+var DEFAULT_CELL_ANIMATION_DURATION_MS = 2e3;
+var DEFAULT_CELL_ANIMATION_ITERATION_COUNT = Infinity;
+var DEFAULT_CELL_ANIMATION_ITERATION_DELAY_MS = 0;
+var DEFAULT_CELL_ANIMATION_SIZE_ANCHOR = "width";
+var DEFAULT_CELL_ANIMATION_WEIGHT = 0;
+var CELL_ANIMATION_PERSPECTIVE_RATIO = 1.5;
+var CELL_ANIMATION_BLEED_PX = 1;
+var CellAnimation = (props) => {
+	const getAnimationDurationMs = createMemo(() => access(props.animationDurationMs) ?? DEFAULT_CELL_ANIMATION_DURATION_MS);
+	const getAnimationIterationCount = createMemo(() => access(props.animationIterationCount) ?? DEFAULT_CELL_ANIMATION_ITERATION_COUNT);
+	const getAnimationIterationDelayMs = createMemo(() => access(props.animationIterationDelayMs) ?? DEFAULT_CELL_ANIMATION_ITERATION_DELAY_MS);
+	const getSizeAnchor = createMemo(() => access(props.sizeAnchor) ?? DEFAULT_CELL_ANIMATION_SIZE_ANCHOR);
+	const getAriaLabel = createMemo(() => access(props.ariaLabel));
+	const [getRootRef, setRootRef] = createSignal();
+	const [getImgRef, setImgRef] = createSignal();
+	const [getContainerRef, setContainerRef] = createSignal();
+	const [getIsWindowVisible, setIsWindowVisible] = createSignal(true);
+	const [getIsPlaying] = SignalMirror.createOptional(() => props.playbackSignal, true);
+	const [getCurrentIteration, setCurrentIteration] = createSignal(0);
+	const [getRootSize, setRootSize] = createSignal({
+		width: 0,
+		height: 0
+	});
+	const getCellCount = createMemo(() => {
+		const cellCount = access(props.cellCount);
+		const rootSize = getRootSize();
+		return {
+			x: MathUtils.clamp(Math.round(cellCount.x), 1, Math.max(Math.round(rootSize.width), 1)),
+			y: MathUtils.clamp(Math.round(cellCount.y), 1, Math.max(Math.round(rootSize.height), 1))
+		};
+	}, void 0, { equals: (prev, next) => prev.x === next.x && prev.y === next.y });
+	const getPerspective = createMemo(() => Math.max(getRootSize().width, getRootSize().height) * CELL_ANIMATION_PERSPECTIVE_RATIO);
+	const getCellWeights = createMemo(() => props.computeCellWeights?.(getCellCount()) ?? []);
+	const getColumnEdges = createMemo(() => {
+		const width = getRootSize().width;
+		const count = getCellCount().x;
+		return Array.from({ length: count + 1 }, (_, idx) => Math.round(idx * width / count));
+	});
+	const getRowEdges = createMemo(() => {
+		const height = getRootSize().height;
+		const count = getCellCount().y;
+		return Array.from({ length: count + 1 }, (_, idx) => Math.round(idx * height / count));
+	});
+	const getCellBounds = (pos) => {
+		const columns = getColumnEdges();
+		const rows = getRowEdges();
+		return {
+			x: columns[pos.x],
+			y: rows[pos.y],
+			width: columns[pos.x + 1] - columns[pos.x] + CELL_ANIMATION_BLEED_PX,
+			height: rows[pos.y + 1] - rows[pos.y] + CELL_ANIMATION_BLEED_PX
+		};
+	};
+	const getCellDefs = createMemo(() => {
+		const count = getCellCount();
+		const weights = getCellWeights();
+		return Array.from({ length: count.x * count.y }, (_, idx) => {
+			const pos = {
+				x: idx % count.x,
+				y: Math.floor(idx / count.x)
+			};
+			return {
+				pos,
+				count,
+				weight: weights[pos.y]?.[pos.x] ?? DEFAULT_CELL_ANIMATION_WEIGHT
+			};
+		});
+	});
+	const getTimeline = createMemo(() => ({
+		source: access(props.src),
+		iteration: getCurrentIteration()
+	}));
+	const getEvaluationDefs = createMemo(() => getCellDefs().map((defs) => {
+		const bounds = getCellBounds(defs.pos);
+		return {
+			...defs,
+			size: {
+				width: bounds.width,
+				height: bounds.height
+			}
+		};
+	}));
+	createEffect(() => {
+		let rafId;
+		let timeout;
+		onCleanup(() => {
+			cancelAnimationFrame(rafId);
+			clearTimeout(timeout);
+		});
+		const rootRef = getRootRef();
+		const containerRef = getContainerRef();
+		const duration = getAnimationDurationMs();
+		const iterationDelay = getAnimationIterationDelayMs();
+		const maxIterations = getAnimationIterationCount();
+		const { iteration } = getTimeline();
+		const isWindowVisible = getIsWindowVisible();
+		const isPlaying = getIsPlaying();
+		const cellDefs = getEvaluationDefs();
+		if (!isWindowVisible || !isPlaying || !rootRef || !containerRef || iteration >= maxIterations) return;
+		const cells = Array.from(containerRef.querySelectorAll(":scope > div"));
+		const start = performance.now();
+		const tick = (now) => {
+			const t = Math.min(1, (now - start) / duration);
+			if (props.computeRootAnimation) CellAnimationUtils.assignAnimationProps(rootRef, props.computeRootAnimation(t));
+			for (let i = 0; i < cells.length && i < cellDefs.length; i++) CellAnimationUtils.assignAnimationProps(cells[i], props.computeCellAnimation(cellDefs[i], t));
+			if (t >= 1) {
+				props.onIterationEnd?.();
+				if (getCurrentIteration() + 1 >= maxIterations) props.onAnimationEnd?.();
+				else timeout = setTimeout(() => {
+					setCurrentIteration((v) => v + 1);
+				}, iterationDelay);
+				return;
+			}
+			rafId = requestAnimationFrame(tick);
+		};
+		rafId = requestAnimationFrame(tick);
+	});
+	createEffect(() => {
+		let resizeObserver;
+		onCleanup(() => {
+			resizeObserver?.disconnect();
+		});
+		const imgRef = getImgRef();
+		if (!imgRef) return;
+		resizeObserver = new ResizeObserver(() => {
+			setRootSize({
+				width: imgRef.offsetWidth,
+				height: imgRef.offsetHeight
+			});
+		});
+		resizeObserver.observe(imgRef);
+	});
+	onMount(() => {
+		const handleVisibilityChange = () => {
+			setIsWindowVisible(document.visibilityState === "visible");
+		};
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		onCleanup(() => {
+			document.removeEventListener("visibilitychange", handleVisibilityChange);
+		});
+	});
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+		use(setRootRef, _el$);
+		className(_el$, cellAnimationRoot);
+		use(setImgRef, _el$2);
+		className(_el$2, cellAnimationAnchor);
+		use(setContainerRef, _el$3);
+		className(_el$3, cellAnimationContainer);
+		insert(_el$3, createComponent(For, {
+			get each() {
+				return getCellDefs();
+			},
+			children: (defs) => {
+				const getBounds = createMemo(() => getCellBounds(defs.pos));
+				return (() => {
+					var _el$4 = _tmpl$2();
+					className(_el$4, cellAnimationCell);
+					effect((_p$) => {
+						var _v$8 = `${getBounds().x}px`, _v$9 = `${getBounds().y}px`, _v$0 = `${getBounds().width}px`, _v$1 = `${getBounds().height}px`, _v$10 = `${-getBounds().x}px ${-getBounds().y}px`, _v$11 = `${Math.floor((1 - defs.weight) * 100)}`;
+						_v$8 !== _p$.e && setStyleProperty(_el$4, "left", _p$.e = _v$8);
+						_v$9 !== _p$.t && setStyleProperty(_el$4, "top", _p$.t = _v$9);
+						_v$0 !== _p$.a && setStyleProperty(_el$4, "width", _p$.a = _v$0);
+						_v$1 !== _p$.o && setStyleProperty(_el$4, "height", _p$.o = _v$1);
+						_v$10 !== _p$.i && setStyleProperty(_el$4, "background-position", _p$.i = _v$10);
+						_v$11 !== _p$.n && setStyleProperty(_el$4, "z-index", _p$.n = _v$11);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0,
+						n: void 0
+					});
+					return _el$4;
+				})();
+			}
+		}));
+		effect((_p$) => {
+			var _v$ = getAriaLabel() ? "img" : void 0, _v$2 = getAriaLabel(), _v$3 = getAriaLabel() ? void 0 : "true", _v$4 = access(props.src), _v$5 = getSizeAnchor() === "width" ? "100%" : "auto", _v$6 = getSizeAnchor() === "height" ? "100%" : "auto", _v$7 = {
+				...assignInlineVars({
+					[cellSrcVar]: `url("${access(props.src)}")`,
+					[cellSizeVar]: `${getRootSize().width}px ${getRootSize().height}px`
+				}),
+				width: `${getRootSize().width}px`,
+				height: `${getRootSize().height}px`,
+				perspective: getPerspective() > 0 ? `${getPerspective()}px` : "none"
+			};
+			_v$ !== _p$.e && setAttribute(_el$, "role", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "aria-hidden", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$2, "src", _p$.o = _v$4);
+			_v$5 !== _p$.i && setAttribute(_el$2, "width", _p$.i = _v$5);
+			_v$6 !== _p$.n && setAttribute(_el$2, "height", _p$.n = _v$6);
+			_p$.s = style(_el$3, _v$7, _p$.s);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0
+		});
+		return _el$;
+	})();
+};
+//#endregion
+export { CellAnimation };
+
+//# sourceMappingURL=CellAnimation.js.map

package/dist/Exotics/CellAnimation/CellAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellAnimation.js","names":["For","createEffect","createMemo","createSignal","onCleanup","onMount","MathUtils","Point2d","Size2d","assignInlineVars","SignalMirror","access","CellAnimationEvaluationDefs","CellAnimationProps","CellAnimationUtils","styles","DEFAULT_CELL_ANIMATION_DURATION_MS","DEFAULT_CELL_ANIMATION_ITERATION_COUNT","Infinity","DEFAULT_CELL_ANIMATION_ITERATION_DELAY_MS","DEFAULT_CELL_ANIMATION_SIZE_ANCHOR","DEFAULT_CELL_ANIMATION_WEIGHT","CELL_ANIMATION_PERSPECTIVE_RATIO","CELL_ANIMATION_BLEED_PX","CellAnimation","props","getAnimationDurationMs","animationDurationMs","getAnimationIterationCount","animationIterationCount","getAnimationIterationDelayMs","animationIterationDelayMs","getSizeAnchor","sizeAnchor","getAriaLabel","ariaLabel","getRootRef","setRootRef","HTMLElement","getImgRef","setImgRef","getContainerRef","setContainerRef","getIsWindowVisible","setIsWindowVisible","getIsPlaying","createOptional","playbackSignal","getCurrentIteration","setCurrentIteration","getRootSize","setRootSize","width","height","getCellCount","cellCount","rootSize","x","clamp","Math","round","max","y","undefined","equals","prev","next","getPerspective","getCellWeights","computeCellWeights","getColumnEdges","count","Array","from","length","_","idx","getRowEdges","getCellBounds","pos","columns","rows","getCellDefs","Omit","weights","floor","weight","getTimeline","source","src","iteration","getEvaluationDefs","map","defs","bounds","size","rafId","ReturnType","requestAnimationFrame","timeout","setTimeout","cancelAnimationFrame","clearTimeout","rootRef","containerRef","duration","iterationDelay","maxIterations","isWindowVisible","isPlaying","cellDefs","cells","querySelectorAll","start","performance","now","tick","t","min","computeRootAnimation","assignAnimationProps","i","computeCellAnimation","onIterationEnd","onAnimationEnd","v","resizeObserver","ResizeObserver","disconnect","imgRef","offsetWidth","offsetHeight","observe","handleVisibilityChange","document","visibilityState","addEventListener","removeEventListener","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$use","_$className","cellAnimationRoot","cellAnimationAnchor","cellAnimationContainer","_$insert","_$createComponent","each","children","getBounds","_el$4","_tmpl$2","cellAnimationCell","_$effect","_p$","_v$8","_v$9","_v$0","_v$1","_v$10","_v$11","e","_$setStyleProperty","a","o","n","_v$","_v$2","_v$3","_v$4","_v$5","_v$6","_v$7","cellSrcVar","cellSizeVar","perspective","_$setAttribute","s","_$style"],"sources":["../../../src/Exotics/CellAnimation/CellAnimation.tsx"],"sourcesContent":["import { For, createEffect, createMemo, createSignal, onCleanup, onMount } from \"solid-js\";\n\nimport { MathUtils, type Point2d, type Size2d } from \"@thewaver/ss-utils\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\n\nimport { SignalMirror } from \"../../Abstracts/SignalMirror/SignalMirror\";\nimport { access } from \"../../Utils/propUtils\";\nimport type { CellAnimationEvaluationDefs, CellAnimationProps } from \"./CellAnimation.types\";\nimport { CellAnimationUtils } from \"./CellAnimation.utils\";\n\nimport * as styles from \"./CellAnimation.css\";\n\nconst DEFAULT_CELL_ANIMATION_DURATION_MS = 2000;\nconst DEFAULT_CELL_ANIMATION_ITERATION_COUNT = Infinity;\nconst DEFAULT_CELL_ANIMATION_ITERATION_DELAY_MS = 0;\nconst DEFAULT_CELL_ANIMATION_SIZE_ANCHOR = \"width\";\nconst DEFAULT_CELL_ANIMATION_WEIGHT = 0;\nconst CELL_ANIMATION_PERSPECTIVE_RATIO = 1.5;\nconst CELL_ANIMATION_BLEED_PX = 1;\n\nexport const CellAnimation = (props: CellAnimationProps) => {\n    const getAnimationDurationMs = createMemo(\n        () => access(props.animationDurationMs) ?? DEFAULT_CELL_ANIMATION_DURATION_MS,\n    );\n\n    const getAnimationIterationCount = createMemo(\n        () => access(props.animationIterationCount) ?? DEFAULT_CELL_ANIMATION_ITERATION_COUNT,\n    );\n\n    const getAnimationIterationDelayMs = createMemo(\n        () => access(props.animationIterationDelayMs) ?? DEFAULT_CELL_ANIMATION_ITERATION_DELAY_MS,\n    );\n\n    const getSizeAnchor = createMemo(() => access(props.sizeAnchor) ?? DEFAULT_CELL_ANIMATION_SIZE_ANCHOR);\n\n    const getAriaLabel = createMemo(() => access(props.ariaLabel));\n\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\n    const [getImgRef, setImgRef] = createSignal<HTMLElement>();\n    const [getContainerRef, setContainerRef] = createSignal<HTMLElement>();\n    const [getIsWindowVisible, setIsWindowVisible] = createSignal(true);\n    const [getIsPlaying] = SignalMirror.createOptional(() => props.playbackSignal, true);\n    const [getCurrentIteration, setCurrentIteration] = createSignal(0);\n    const [getRootSize, setRootSize] = createSignal<Size2d>({ width: 0, height: 0 });\n\n    const getCellCount = createMemo<Point2d, undefined>(\n        () => {\n            const cellCount = access(props.cellCount);\n            const rootSize = getRootSize();\n\n            return {\n                x: MathUtils.clamp(Math.round(cellCount.x), 1, Math.max(Math.round(rootSize.width), 1)),\n                y: MathUtils.clamp(Math.round(cellCount.y), 1, Math.max(Math.round(rootSize.height), 1)),\n            };\n        },\n        undefined,\n        { equals: (prev, next) => prev.x === next.x && prev.y === next.y },\n    );\n\n    const getPerspective = createMemo(\n        () => Math.max(getRootSize().width, getRootSize().height) * CELL_ANIMATION_PERSPECTIVE_RATIO,\n    );\n\n    const getCellWeights = createMemo(() => props.computeCellWeights?.(getCellCount()) ?? []);\n\n    const getColumnEdges = createMemo(() => {\n        const width = getRootSize().width;\n        const count = getCellCount().x;\n\n        return Array.from({ length: count + 1 }, (_, idx) => Math.round((idx * width) / count));\n    });\n\n    const getRowEdges = createMemo(() => {\n        const height = getRootSize().height;\n        const count = getCellCount().y;\n\n        return Array.from({ length: count + 1 }, (_, idx) => Math.round((idx * height) / count));\n    });\n\n    const getCellBounds = (pos: Point2d) => {\n        const columns = getColumnEdges();\n        const rows = getRowEdges();\n\n        return {\n            x: columns[pos.x],\n            y: rows[pos.y],\n            width: columns[pos.x + 1] - columns[pos.x] + CELL_ANIMATION_BLEED_PX,\n            height: rows[pos.y + 1] - rows[pos.y] + CELL_ANIMATION_BLEED_PX,\n        };\n    };\n\n    const getCellDefs = createMemo<Omit<CellAnimationEvaluationDefs, \"size\">[]>(() => {\n        const count = getCellCount();\n        const weights = getCellWeights();\n\n        return Array.from({ length: count.x * count.y }, (_, idx) => {\n            const pos = { x: idx % count.x, y: Math.floor(idx / count.x) };\n\n            return { pos, count, weight: weights[pos.y]?.[pos.x] ?? DEFAULT_CELL_ANIMATION_WEIGHT };\n        });\n    });\n\n    const getTimeline = createMemo(() => ({ source: access(props.src), iteration: getCurrentIteration() }));\n\n    const getEvaluationDefs = createMemo<CellAnimationEvaluationDefs[]>(() =>\n        getCellDefs().map((defs) => {\n            const bounds = getCellBounds(defs.pos);\n\n            return { ...defs, size: { width: bounds.width, height: bounds.height } };\n        }),\n    );\n\n    createEffect(() => {\n        let rafId: ReturnType<typeof requestAnimationFrame>;\n        let timeout: ReturnType<typeof setTimeout>;\n\n        onCleanup(() => {\n            cancelAnimationFrame(rafId);\n            clearTimeout(timeout);\n        });\n\n        const rootRef = getRootRef();\n        const containerRef = getContainerRef();\n        const duration = getAnimationDurationMs();\n        const iterationDelay = getAnimationIterationDelayMs();\n        const maxIterations = getAnimationIterationCount();\n        const { iteration } = getTimeline();\n        const isWindowVisible = getIsWindowVisible();\n        const isPlaying = getIsPlaying();\n        const cellDefs = getEvaluationDefs();\n\n        if (!isWindowVisible || !isPlaying || !rootRef || !containerRef || iteration >= maxIterations) return;\n\n        const cells = Array.from(containerRef.querySelectorAll(\":scope > div\")) as HTMLElement[];\n        const start = performance.now();\n\n        const tick = (now: number) => {\n            const t = Math.min(1, (now - start) / duration);\n\n            if (props.computeRootAnimation) {\n                CellAnimationUtils.assignAnimationProps(rootRef, props.computeRootAnimation(t));\n            }\n\n            for (let i = 0; i < cells.length && i < cellDefs.length; i++) {\n                CellAnimationUtils.assignAnimationProps(cells[i], props.computeCellAnimation(cellDefs[i], t));\n            }\n\n            if (t >= 1) {\n                props.onIterationEnd?.();\n\n                if (getCurrentIteration() + 1 >= maxIterations) {\n                    props.onAnimationEnd?.();\n                } else {\n                    timeout = setTimeout(() => {\n                        setCurrentIteration((v) => v + 1);\n                    }, iterationDelay);\n                }\n\n                return;\n            }\n\n            rafId = requestAnimationFrame(tick);\n        };\n\n        rafId = requestAnimationFrame(tick);\n    });\n\n    createEffect(() => {\n        let resizeObserver: ResizeObserver | undefined;\n\n        onCleanup(() => {\n            resizeObserver?.disconnect();\n        });\n\n        const imgRef = getImgRef();\n\n        if (!imgRef) return;\n\n        resizeObserver = new ResizeObserver(() => {\n            setRootSize({\n                width: imgRef.offsetWidth,\n                height: imgRef.offsetHeight,\n            });\n        });\n        resizeObserver.observe(imgRef);\n    });\n\n    onMount(() => {\n        const handleVisibilityChange = () => {\n            setIsWindowVisible(document.visibilityState === \"visible\");\n        };\n\n        document.addEventListener(\"visibilitychange\", handleVisibilityChange);\n\n        onCleanup(() => {\n            document.removeEventListener(\"visibilitychange\", handleVisibilityChange);\n        });\n    });\n\n    return (\n        <div\n            ref={setRootRef}\n            class={styles.cellAnimationRoot}\n            role={getAriaLabel() ? \"img\" : undefined}\n            aria-label={getAriaLabel()}\n            aria-hidden={getAriaLabel() ? undefined : \"true\"}\n        >\n            <img\n                ref={setImgRef}\n                src={access(props.src)}\n                class={styles.cellAnimationAnchor}\n                width={getSizeAnchor() === \"width\" ? \"100%\" : \"auto\"}\n                height={getSizeAnchor() === \"height\" ? \"100%\" : \"auto\"}\n                aria-hidden=\"true\"\n            />\n\n            <div\n                ref={setContainerRef}\n                class={styles.cellAnimationContainer}\n                style={{\n                    ...assignInlineVars({\n                        [styles.cellSrcVar]: `url(\"${access(props.src)}\")`,\n                        [styles.cellSizeVar]: `${getRootSize().width}px ${getRootSize().height}px`,\n                    }),\n                    width: `${getRootSize().width}px`,\n                    height: `${getRootSize().height}px`,\n                    perspective: getPerspective() > 0 ? `${getPerspective()}px` : \"none\",\n                }}\n            >\n                <For each={getCellDefs()}>\n                    {(defs) => {\n                        const getBounds = createMemo(() => getCellBounds(defs.pos));\n\n                        return (\n                            <div\n                                class={styles.cellAnimationCell}\n                                style={{\n                                    \"left\": `${getBounds().x}px`,\n                                    \"top\": `${getBounds().y}px`,\n                                    \"width\": `${getBounds().width}px`,\n                                    \"height\": `${getBounds().height}px`,\n                                    \"background-position\": `${-getBounds().x}px ${-getBounds().y}px`,\n                                    \"z-index\": `${Math.floor((1 - defs.weight) * 100)}`,\n                                }}\n                                aria-hidden=\"true\"\n                            />\n                        );\n                    }}\n                </For>\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Exotics/CellAnimation/CellAnimation.utils.js

@@ -0,0 +1,55 @@
+import { CSSConst, CSS_FILTER_KEYS, MathUtils } from "@thewaver/ss-utils";
+//#region src/Exotics/CellAnimation/CellAnimation.utils.ts
+var CellAnimationUtils;
+(function(_CellAnimationUtils) {
+	const TRANSFORM_ORDER = [
+		"perspective",
+		"matrix",
+		"matrix3d",
+		"translate",
+		"translate3d",
+		"translateX",
+		"translateY",
+		"translateZ",
+		"rotate",
+		"rotate3d",
+		"rotateX",
+		"rotateY",
+		"rotateZ",
+		"skew",
+		"skewX",
+		"skewY",
+		"scale",
+		"scale3d",
+		"scaleX",
+		"scaleY",
+		"scaleZ"
+	];
+	const formatFunction = (key, value) => {
+		const units = CSSConst.ANIMATION_UNITS[key];
+		const values = Array.isArray(value) ? value : [value];
+		return `${key}(${units.map((unit, idx) => `${values[idx] ?? 0}${unit}`).join(", ")})`;
+	};
+	_CellAnimationUtils.assignAnimationProps = (el, evalResult) => {
+		const transforms = [];
+		const filters = [];
+		for (const key of TRANSFORM_ORDER) {
+			const value = evalResult[key];
+			if (value !== void 0) transforms.push(formatFunction(key, value));
+		}
+		for (const key of CSS_FILTER_KEYS) {
+			const value = evalResult[key];
+			if (value !== void 0) filters.push(formatFunction(key, value));
+		}
+		el.style.transform = transforms.join(" ");
+		el.style.filter = filters.join(" ");
+	};
+	const isEvenRow = _CellAnimationUtils.isEvenRow = (dist) => MathUtils.isEven(dist.y);
+	const isEvenColumn = _CellAnimationUtils.isEvenColumn = (dist) => MathUtils.isEven(dist.x);
+	_CellAnimationUtils.isEvenRing = (dist) => !(!isEvenColumn(dist) && dist.y <= dist.x || !isEvenRow(dist) && dist.x <= dist.y);
+	_CellAnimationUtils.isEvenCheckered = (dist) => MathUtils.isEven(dist.x + dist.y);
+})(CellAnimationUtils || (CellAnimationUtils = {}));
+//#endregion
+export { CellAnimationUtils };
+
+//# sourceMappingURL=CellAnimation.utils.js.map