@thewaver/ss-components 0.0.1 → 0.0.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"CellAnimation.utils.js","names":[],"sources":["../../../src/Exotics/CellAnimation/CellAnimation.utils.ts"],"sourcesContent":["import {\n    type CSSAnimationKey,\n    CSSConst,\n    type CSSTransformKey,\n    CSS_FILTER_KEYS,\n    MathUtils,\n    type Point2d,\n} from \"@thewaver/ss-utils\";\n\nexport namespace CellAnimationUtils {\n    const TRANSFORM_ORDER: readonly CSSTransformKey[] = [\n        \"perspective\",\n        \"matrix\",\n        \"matrix3d\",\n        \"translate\",\n        \"translate3d\",\n        \"translateX\",\n        \"translateY\",\n        \"translateZ\",\n        \"rotate\",\n        \"rotate3d\",\n        \"rotateX\",\n        \"rotateY\",\n        \"rotateZ\",\n        \"skew\",\n        \"skewX\",\n        \"skewY\",\n        \"scale\",\n        \"scale3d\",\n        \"scaleX\",\n        \"scaleY\",\n        \"scaleZ\",\n    ];\n\n    const formatFunction = (key: CSSAnimationKey, value: number | number[]) => {\n        const units = CSSConst.ANIMATION_UNITS[key];\n        const values = Array.isArray(value) ? value : [value];\n        const args = units.map((unit, idx) => `${values[idx] ?? 0}${unit}`);\n\n        return `${key}(${args.join(\", \")})`;\n    };\n\n    export const assignAnimationProps = (\n        el: HTMLElement,\n        evalResult: Partial<Record<CSSAnimationKey, number | number[]>>,\n    ) => {\n        const transforms: string[] = [];\n        const filters: string[] = [];\n\n        for (const key of TRANSFORM_ORDER) {\n            const value = evalResult[key];\n\n            if (value !== undefined) {\n                transforms.push(formatFunction(key, value));\n            }\n        }\n\n        for (const key of CSS_FILTER_KEYS) {\n            const value = evalResult[key];\n\n            if (value !== undefined) {\n                filters.push(formatFunction(key, value));\n            }\n        }\n\n        el.style.transform = transforms.join(\" \");\n        el.style.filter = filters.join(\" \");\n    };\n\n    export const isEvenRow = (dist: Point2d) => MathUtils.isEven(dist.y);\n\n    export const isEvenColumn = (dist: Point2d) => MathUtils.isEven(dist.x);\n\n    export const isEvenRing = (dist: Point2d) =>\n        !((!isEvenColumn(dist) && dist.y <= dist.x) || (!isEvenRow(dist) && dist.x <= dist.y));\n\n    export const isEvenCheckered = (dist: Point2d) => MathUtils.isEven(dist.x + dist.y);\n}\n"],"mappings":";;AASO,IAAU;CAAV,SAAA,qBAAA;CACH,MAAM,kBAA8C;EAChD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ;CAEA,MAAM,kBAAkB,KAAsB,UAA6B;EACvE,MAAM,QAAQ,SAAS,gBAAgB;EACvC,MAAM,SAAS,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;EAGpD,OAAO,GAAG,IAAI,GAFD,MAAM,KAAK,MAAM,QAAQ,GAAG,OAAO,QAAQ,IAAI,MAE3C,CAAA,CAAK,KAAK,IAAI,EAAE;CACrC;CAEa,oBAAA,wBACT,IACA,eACC;EACD,MAAM,aAAuB,CAAC;EAC9B,MAAM,UAAoB,CAAC;EAE3B,KAAK,MAAM,OAAO,iBAAiB;GAC/B,MAAM,QAAQ,WAAW;GAEzB,IAAI,UAAU,KAAA,GACV,WAAW,KAAK,eAAe,KAAK,KAAK,CAAC;EAElD;EAEA,KAAK,MAAM,OAAO,iBAAiB;GAC/B,MAAM,QAAQ,WAAW;GAEzB,IAAI,UAAU,KAAA,GACV,QAAQ,KAAK,eAAe,KAAK,KAAK,CAAC;EAE/C;EAEA,GAAG,MAAM,YAAY,WAAW,KAAK,GAAG;EACxC,GAAG,MAAM,SAAS,QAAQ,KAAK,GAAG;CACtC;CAEO,MAAM,YAAA,oBAAA,aAAa,SAAkB,UAAU,OAAO,KAAK,CAAC;CAE5D,MAAM,eAAA,oBAAA,gBAAgB,SAAkB,UAAU,OAAO,KAAK,CAAC;CAEzD,oBAAA,cAAc,SACvB,EAAG,CAAC,aAAa,IAAI,KAAK,KAAK,KAAK,KAAK,KAAO,CAAC,UAAU,IAAI,KAAK,KAAK,KAAK,KAAK;CAE1E,oBAAA,mBAAmB,SAAkB,UAAU,OAAO,KAAK,IAAI,KAAK,CAAC;AACrF,EAAA,CAAA,uBAAA,qBAAA,CAAA,EAAD"}

package/dist/Exotics/Cuboid/Cuboid.css.js

@@ -0,0 +1,10 @@
+/* empty css                          */
+//#region src/Exotics/Cuboid/Cuboid.css.ts
+var cuboidRoot = "eui1ls0";
+var cuboidPerspective = "eui1ls1";
+var cuboidBody = "eui1ls2";
+var cuboidFace = "eui1ls3";
+//#endregion
+export { cuboidBody, cuboidFace, cuboidPerspective, cuboidRoot };
+
+//# sourceMappingURL=Cuboid.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Cuboid.css.js","names":[],"sources":["../../../src/Exotics/Cuboid/Cuboid.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const cuboidRoot = style({\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    flexGrow: 0,\n    flexShrink: 0,\n});\n\nexport const cuboidPerspective = style({\n    position: \"relative\",\n});\n\nexport const cuboidBody = style({\n    position: \"absolute\",\n    inset: 0,\n    transformOrigin: \"center center\",\n    transformStyle: \"preserve-3d\",\n    transitionProperty: \"transform\",\n});\n\nexport const cuboidFace = style({\n    position: \"absolute\",\n    transformOrigin: \"center center\",\n    backfaceVisibility: \"hidden\",\n});\n"],"mappings":""}

package/dist/Exotics/Cuboid/Cuboid.js

@@ -0,0 +1,104 @@
+import { access } from "../../Utils/propUtils.js";
+import { BARREL_PERSPECTIVE_PX } from "../../Abstracts/Barrel/Barrel.utils.js";
+import { CuboidUtils } from "./Cuboid.utils.js";
+import { cuboidBody, cuboidFace, cuboidPerspective, cuboidRoot } from "./Cuboid.css.js";
+import { Index, createMemo } from "solid-js";
+import { className, createComponent, effect, insert, setAttribute, setStyleProperty, template } from "solid-js/web";
+//#region src/Exotics/Cuboid/Cuboid.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=group aria-roledescription=box><div><div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div role=group aria-roledescription=face>`);
+var DEFAULT_CUBOID_TRANSITION_DURATION_MS = 400;
+var HALF = .5;
+var FACES = [
+	"front",
+	"right",
+	"back",
+	"left",
+	"top",
+	"bottom"
+];
+var FACE_LABELS = {
+	front: "Front",
+	right: "Right",
+	back: "Back",
+	left: "Left",
+	top: "Top",
+	bottom: "Bottom"
+};
+var Cuboid = (props) => {
+	const [getYaw] = props.yawSignal;
+	const [getPitch] = props.pitchSignal;
+	const getSize = createMemo(() => access(props.size));
+	const getReservedSize = createMemo(() => CuboidUtils.getReservedSize(getSize()));
+	const getFacing = createMemo(() => CuboidUtils.getFacing(getYaw(), getPitch()));
+	const getFaceLabel = (face) => props.computeFaceLabel?.(face) ?? FACE_LABELS[face];
+	const getFaceState = (face) => ({
+		face,
+		isShowing: face === getFacing()
+	});
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+		className(_el$, cuboidRoot);
+		className(_el$2, cuboidPerspective);
+		setStyleProperty(_el$2, "perspective", `${BARREL_PERSPECTIVE_PX}px`);
+		className(_el$3, cuboidBody);
+		insert(_el$3, createComponent(Index, {
+			each: FACES,
+			children: (getFace) => {
+				const getIsShowing = () => getFace() === getFacing();
+				const getFaceSize = () => CuboidUtils.getFaceSize(getFace(), getSize());
+				return (() => {
+					var _el$4 = _tmpl$2();
+					className(_el$4, cuboidFace);
+					insert(_el$4, () => props.renderFace(getFace, () => getFaceState(getFace())));
+					effect((_p$) => {
+						var _v$8 = `${getFaceSize().width}px`, _v$9 = `${getFaceSize().height}px`, _v$0 = `${(getSize().width - getFaceSize().width) * HALF}px`, _v$1 = `${(getSize().height - getFaceSize().height) * HALF}px`, _v$10 = CuboidUtils.getFaceTransform(getFace(), getSize()), _v$11 = getFaceLabel(getFace()), _v$12 = !getIsShowing() || void 0, _v$13 = !getIsShowing();
+						_v$8 !== _p$.e && setStyleProperty(_el$4, "width", _p$.e = _v$8);
+						_v$9 !== _p$.t && setStyleProperty(_el$4, "height", _p$.t = _v$9);
+						_v$0 !== _p$.a && setStyleProperty(_el$4, "left", _p$.a = _v$0);
+						_v$1 !== _p$.o && setStyleProperty(_el$4, "top", _p$.o = _v$1);
+						_v$10 !== _p$.i && setStyleProperty(_el$4, "transform", _p$.i = _v$10);
+						_v$11 !== _p$.n && setAttribute(_el$4, "aria-label", _p$.n = _v$11);
+						_v$12 !== _p$.s && setAttribute(_el$4, "aria-hidden", _p$.s = _v$12);
+						_v$13 !== _p$.h && (_el$4.inert = _p$.h = _v$13);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0,
+						n: void 0,
+						s: void 0,
+						h: void 0
+					});
+					return _el$4;
+				})();
+			}
+		}));
+		effect((_p$) => {
+			var _v$ = `${getReservedSize().width}px`, _v$2 = `${getReservedSize().height}px`, _v$3 = access(props.ariaLabel), _v$4 = `${getSize().width}px`, _v$5 = `${getSize().height}px`, _v$6 = CuboidUtils.getTurnTransform(getYaw(), getPitch(), getSize()), _v$7 = `${access(props.transitionDurationMs) ?? DEFAULT_CUBOID_TRANSITION_DURATION_MS}ms`;
+			_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$, "aria-label", _p$.a = _v$3);
+			_v$4 !== _p$.o && setStyleProperty(_el$2, "width", _p$.o = _v$4);
+			_v$5 !== _p$.i && setStyleProperty(_el$2, "height", _p$.i = _v$5);
+			_v$6 !== _p$.n && setStyleProperty(_el$3, "transform", _p$.n = _v$6);
+			_v$7 !== _p$.s && setStyleProperty(_el$3, "transition-duration", _p$.s = _v$7);
+			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 { Cuboid };
+
+//# sourceMappingURL=Cuboid.js.map

package/dist/Exotics/Cuboid/Cuboid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cuboid.js","names":["Index","createMemo","BARREL_PERSPECTIVE_PX","access","CuboidFace","CuboidFaceState","CuboidProps","CuboidUtils","styles","DEFAULT_CUBOID_TRANSITION_DURATION_MS","HALF","FACES","FACE_LABELS","Record","front","right","back","left","top","bottom","CUBOID_ROLE_DESCRIPTION","FACE_ROLE_DESCRIPTION","Cuboid","props","getYaw","yawSignal","getPitch","pitchSignal","getSize","size","getReservedSize","getFacing","getFaceLabel","face","computeFaceLabel","getFaceState","isShowing","_el$","_tmpl$","_el$2","firstChild","_el$3","_$className","cuboidRoot","cuboidPerspective","_$setStyleProperty","cuboidBody","_$insert","_$createComponent","each","children","getFace","getIsShowing","getFaceSize","_el$4","_tmpl$2","cuboidFace","renderFace","_$effect","_p$","_v$8","width","_v$9","height","_v$0","_v$1","_v$10","getFaceTransform","_v$11","_v$12","undefined","_v$13","e","t","a","o","i","n","_$setAttribute","s","h","inert","_v$","_v$2","_v$3","ariaLabel","_v$4","_v$5","_v$6","getTurnTransform","_v$7","transitionDurationMs"],"sources":["../../../src/Exotics/Cuboid/Cuboid.tsx"],"sourcesContent":["import { Index, createMemo } from \"solid-js\";\n\nimport { BARREL_PERSPECTIVE_PX } from \"../../Abstracts/Barrel/Barrel.utils\";\nimport { access } from \"../../Utils/propUtils\";\nimport type { CuboidFace, CuboidFaceState, CuboidProps } from \"./Cuboid.types\";\nimport { CuboidUtils } from \"./Cuboid.utils\";\n\nimport * as styles from \"./Cuboid.css\";\n\nconst DEFAULT_CUBOID_TRANSITION_DURATION_MS = 400;\n\nconst HALF = 0.5;\n\nconst FACES: CuboidFace[] = [\"front\", \"right\", \"back\", \"left\", \"top\", \"bottom\"];\n\nconst FACE_LABELS: Record<CuboidFace, string> = {\n    front: \"Front\",\n    right: \"Right\",\n    back: \"Back\",\n    left: \"Left\",\n    top: \"Top\",\n    bottom: \"Bottom\",\n};\n\nconst CUBOID_ROLE_DESCRIPTION = \"box\";\nconst FACE_ROLE_DESCRIPTION = \"face\";\n\nexport const Cuboid = (props: CuboidProps) => {\n    const [getYaw] = props.yawSignal;\n    const [getPitch] = props.pitchSignal;\n\n    const getSize = createMemo(() => access(props.size));\n\n    const getReservedSize = createMemo(() => CuboidUtils.getReservedSize(getSize()));\n\n    const getFacing = createMemo(() => CuboidUtils.getFacing(getYaw(), getPitch()));\n\n    const getFaceLabel = (face: CuboidFace) => props.computeFaceLabel?.(face) ?? FACE_LABELS[face];\n\n    const getFaceState = (face: CuboidFace): CuboidFaceState => ({\n        face,\n        isShowing: face === getFacing(),\n    });\n\n    return (\n        <div\n            class={styles.cuboidRoot}\n            style={{\n                width: `${getReservedSize().width}px`,\n                height: `${getReservedSize().height}px`,\n            }}\n            role=\"group\"\n            aria-roledescription={CUBOID_ROLE_DESCRIPTION}\n            aria-label={access(props.ariaLabel)}\n        >\n            <div\n                class={styles.cuboidPerspective}\n                style={{\n                    width: `${getSize().width}px`,\n                    height: `${getSize().height}px`,\n                    perspective: `${BARREL_PERSPECTIVE_PX}px`,\n                }}\n            >\n                <div\n                    class={styles.cuboidBody}\n                    style={{\n                        \"transform\": CuboidUtils.getTurnTransform(getYaw(), getPitch(), getSize()),\n                        \"transition-duration\": `${access(props.transitionDurationMs) ?? DEFAULT_CUBOID_TRANSITION_DURATION_MS}ms`,\n                    }}\n                >\n                    <Index each={FACES}>\n                        {(getFace) => {\n                            const getIsShowing = () => getFace() === getFacing();\n\n                            const getFaceSize = () => CuboidUtils.getFaceSize(getFace(), getSize());\n\n                            return (\n                                <div\n                                    class={styles.cuboidFace}\n                                    style={{\n                                        width: `${getFaceSize().width}px`,\n                                        height: `${getFaceSize().height}px`,\n                                        left: `${(getSize().width - getFaceSize().width) * HALF}px`,\n                                        top: `${(getSize().height - getFaceSize().height) * HALF}px`,\n                                        transform: CuboidUtils.getFaceTransform(getFace(), getSize()),\n                                    }}\n                                    role=\"group\"\n                                    aria-roledescription={FACE_ROLE_DESCRIPTION}\n                                    aria-label={getFaceLabel(getFace())}\n                                    aria-hidden={!getIsShowing() || undefined}\n                                    inert={!getIsShowing()}\n                                >\n                                    {props.renderFace(getFace, () => getFaceState(getFace()))}\n                                </div>\n                            );\n                        }}\n                    </Index>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Exotics/Cuboid/Cuboid.utils.js

@@ -0,0 +1,66 @@
+import { BarrelUtils } from "../../Abstracts/Barrel/Barrel.utils.js";
+import { MathUtils } from "@thewaver/ss-utils";
+//#region src/Exotics/Cuboid/Cuboid.utils.ts
+var QUARTER_TURN_DEG = 90;
+var QUARTER_TURN_COUNT = 4;
+var HALF = .5;
+var UPRIGHT_FACES = [
+	"front",
+	"right",
+	"back",
+	"left"
+];
+var INVERTED_FACES = [
+	"back",
+	"left",
+	"front",
+	"right"
+];
+var UP_PITCH = 1;
+var DOWN_PITCH = 3;
+var INVERTED_PITCH = 2;
+var CuboidUtils;
+(function(_CuboidUtils) {
+	_CuboidUtils.getFaceSize = (face, size) => {
+		if (face === "top" || face === "bottom") return {
+			width: size.width,
+			height: size.depth
+		};
+		if (face === "left" || face === "right") return {
+			width: size.depth,
+			height: size.height
+		};
+		return {
+			width: size.width,
+			height: size.height
+		};
+	};
+	_CuboidUtils.getFaceTransform = (face, size) => {
+		if (face === "front") return `translateZ(${size.depth * HALF}px)`;
+		if (face === "back") return `rotateY(180deg) translateZ(${size.depth * HALF}px)`;
+		if (face === "right") return `rotateY(90deg) translateZ(${size.width * HALF}px)`;
+		if (face === "left") return `rotateY(-90deg) translateZ(${size.width * HALF}px)`;
+		if (face === "top") return `rotateX(90deg) translateZ(${size.height * HALF}px)`;
+		return `rotateX(-90deg) translateZ(${size.height * HALF}px)`;
+	};
+	_CuboidUtils.getTurnTransform = (yaw, pitch, size) => `translateZ(${-size.depth * HALF}px) rotateX(${-pitch * QUARTER_TURN_DEG}deg) rotateY(${-yaw * QUARTER_TURN_DEG}deg)`;
+	_CuboidUtils.getFacing = (yaw, pitch) => {
+		const turnedUp = MathUtils.wrapIndex(pitch, QUARTER_TURN_COUNT);
+		const turnedAcross = MathUtils.wrapIndex(yaw, QUARTER_TURN_COUNT);
+		if (turnedUp === UP_PITCH) return "top";
+		if (turnedUp === DOWN_PITCH) return "bottom";
+		return (turnedUp === INVERTED_PITCH ? INVERTED_FACES : UPRIGHT_FACES)[turnedAcross];
+	};
+	_CuboidUtils.getReservedSize = (size) => {
+		const circumradius = Math.hypot(size.width, size.height, size.depth) * HALF;
+		const extent = BarrelUtils.getProjectedExtent(circumradius, size.depth * HALF);
+		return {
+			width: extent,
+			height: extent
+		};
+	};
+})(CuboidUtils || (CuboidUtils = {}));
+//#endregion
+export { CuboidUtils };
+
+//# sourceMappingURL=Cuboid.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Cuboid.utils.js","names":[],"sources":["../../../src/Exotics/Cuboid/Cuboid.utils.ts"],"sourcesContent":["import type { Size2d } from \"@thewaver/ss-utils\";\nimport { MathUtils } from \"@thewaver/ss-utils\";\n\nimport { BarrelUtils } from \"../../Abstracts/Barrel/Barrel.utils\";\nimport type { CuboidFace, CuboidSize } from \"./Cuboid.types\";\n\nconst QUARTER_TURN_DEG = 90;\nconst QUARTER_TURN_COUNT = 4;\nconst HALF = 0.5;\n\nconst UPRIGHT_FACES: CuboidFace[] = [\"front\", \"right\", \"back\", \"left\"];\nconst INVERTED_FACES: CuboidFace[] = [\"back\", \"left\", \"front\", \"right\"];\n\nconst UP_PITCH = 1;\nconst DOWN_PITCH = 3;\nconst INVERTED_PITCH = 2;\n\nexport namespace CuboidUtils {\n    export const getFaceSize = (face: CuboidFace, size: CuboidSize): Size2d => {\n        if (face === \"top\" || face === \"bottom\") return { width: size.width, height: size.depth };\n\n        if (face === \"left\" || face === \"right\") return { width: size.depth, height: size.height };\n\n        return { width: size.width, height: size.height };\n    };\n\n    export const getFaceTransform = (face: CuboidFace, size: CuboidSize) => {\n        if (face === \"front\") return `translateZ(${size.depth * HALF}px)`;\n\n        if (face === \"back\") return `rotateY(180deg) translateZ(${size.depth * HALF}px)`;\n\n        if (face === \"right\") return `rotateY(90deg) translateZ(${size.width * HALF}px)`;\n\n        if (face === \"left\") return `rotateY(-90deg) translateZ(${size.width * HALF}px)`;\n\n        if (face === \"top\") return `rotateX(90deg) translateZ(${size.height * HALF}px)`;\n\n        return `rotateX(-90deg) translateZ(${size.height * HALF}px)`;\n    };\n\n    export const getTurnTransform = (yaw: number, pitch: number, size: CuboidSize) =>\n        `translateZ(${-size.depth * HALF}px) rotateX(${-pitch * QUARTER_TURN_DEG}deg) rotateY(${-yaw * QUARTER_TURN_DEG}deg)`;\n\n    export const getFacing = (yaw: number, pitch: number): CuboidFace => {\n        const turnedUp = MathUtils.wrapIndex(pitch, QUARTER_TURN_COUNT);\n        const turnedAcross = MathUtils.wrapIndex(yaw, QUARTER_TURN_COUNT);\n\n        if (turnedUp === UP_PITCH) return \"top\";\n\n        if (turnedUp === DOWN_PITCH) return \"bottom\";\n\n        return (turnedUp === INVERTED_PITCH ? INVERTED_FACES : UPRIGHT_FACES)[turnedAcross]!;\n    };\n\n    export const getReservedSize = (size: CuboidSize): Size2d => {\n        const circumradius = Math.hypot(size.width, size.height, size.depth) * HALF;\n        const extent = BarrelUtils.getProjectedExtent(circumradius, size.depth * HALF);\n\n        return { width: extent, height: extent };\n    };\n}\n"],"mappings":";;;AAMA,IAAM,mBAAmB;AACzB,IAAM,qBAAqB;AAC3B,IAAM,OAAO;AAEb,IAAM,gBAA8B;CAAC;CAAS;CAAS;CAAQ;AAAM;AACrE,IAAM,iBAA+B;CAAC;CAAQ;CAAQ;CAAS;AAAO;AAEtE,IAAM,WAAW;AACjB,IAAM,aAAa;AACnB,IAAM,iBAAiB;AAEhB,IAAU;CAAV,SAAA,cAAA;CACU,aAAA,eAAe,MAAkB,SAA6B;EACvE,IAAI,SAAS,SAAS,SAAS,UAAU,OAAO;GAAE,OAAO,KAAK;GAAO,QAAQ,KAAK;EAAM;EAExF,IAAI,SAAS,UAAU,SAAS,SAAS,OAAO;GAAE,OAAO,KAAK;GAAO,QAAQ,KAAK;EAAO;EAEzF,OAAO;GAAE,OAAO,KAAK;GAAO,QAAQ,KAAK;EAAO;CACpD;CAEa,aAAA,oBAAoB,MAAkB,SAAqB;EACpE,IAAI,SAAS,SAAS,OAAO,cAAc,KAAK,QAAQ,KAAK;EAE7D,IAAI,SAAS,QAAQ,OAAO,8BAA8B,KAAK,QAAQ,KAAK;EAE5E,IAAI,SAAS,SAAS,OAAO,6BAA6B,KAAK,QAAQ,KAAK;EAE5E,IAAI,SAAS,QAAQ,OAAO,8BAA8B,KAAK,QAAQ,KAAK;EAE5E,IAAI,SAAS,OAAO,OAAO,6BAA6B,KAAK,SAAS,KAAK;EAE3E,OAAO,8BAA8B,KAAK,SAAS,KAAK;CAC5D;CAEa,aAAA,oBAAoB,KAAa,OAAe,SACzD,cAAc,CAAC,KAAK,QAAQ,KAAK,cAAc,CAAC,QAAQ,iBAAiB,eAAe,CAAC,MAAM,iBAAiB;CAEvG,aAAA,aAAa,KAAa,UAA8B;EACjE,MAAM,WAAW,UAAU,UAAU,OAAO,kBAAkB;EAC9D,MAAM,eAAe,UAAU,UAAU,KAAK,kBAAkB;EAEhE,IAAI,aAAa,UAAU,OAAO;EAElC,IAAI,aAAa,YAAY,OAAO;EAEpC,QAAQ,aAAa,iBAAiB,iBAAiB,cAAA,CAAe;CAC1E;CAEa,aAAA,mBAAmB,SAA6B;EACzD,MAAM,eAAe,KAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,KAAK,KAAK,IAAI;EACvE,MAAM,SAAS,YAAY,mBAAmB,cAAc,KAAK,QAAQ,IAAI;EAE7E,OAAO;GAAE,OAAO;GAAQ,QAAQ;EAAO;CAC3C;AACH,EAAA,CAAA,gBAAA,cAAA,CAAA,EAAD"}

package/dist/Exotics/DrumWheel/DrumWheel.js

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

package/dist/Exotics/DrumWheel/DrumWheel.js.map

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

package/dist/Exotics/ElementMosaic/ElementMosaic.css.js

@@ -0,0 +1,7 @@
+/* empty css                                 */
+//#region src/Exotics/ElementMosaic/ElementMosaic.css.ts
+var elementMosaicItem = "lif0jk0";
+//#endregion
+export { elementMosaicItem };
+
+//# sourceMappingURL=ElementMosaic.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ElementMosaic.css.js","names":[],"sources":["../../../src/Exotics/ElementMosaic/ElementMosaic.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const elementMosaicItem = style({\n    width: \"max-content\",\n});\n"],"mappings":""}

package/dist/Exotics/ElementMosaic/ElementMosaic.js

@@ -0,0 +1,53 @@
+import { ElementObserver } from "../../Abstracts/ElementObserver/ElementObserver.js";
+import { access } from "../../Utils/propUtils.js";
+import { MosaicUtils } from "../Mosaic/Mosaic.utils.js";
+import { Mosaic } from "../Mosaic/Mosaic.js";
+import { elementMosaicItem } from "./ElementMosaic.css.js";
+import { createEffect, createMemo, createSignal } from "solid-js";
+import { className, createComponent, insert, template, use } from "solid-js/web";
+//#region src/Exotics/ElementMosaic/ElementMosaic.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var EMPTY_SIZE = {
+	width: 0,
+	height: 0
+};
+var ElementMosaic = (props) => {
+	const [getMeasuredSizes, setMeasuredSizes] = createSignal([]);
+	const getSizes = createMemo(() => access(props.items).map((_, index) => getMeasuredSizes()[index] ?? EMPTY_SIZE));
+	const setSizeAt = (index, size) => setMeasuredSizes((sizes) => {
+		const next = [...sizes];
+		next[index] = size;
+		return next;
+	});
+	return createComponent(Mosaic, {
+		get sizeAnchor() {
+			return props.sizeAnchor;
+		},
+		get gap() {
+			return props.gap;
+		},
+		sizes: getSizes,
+		isItemSized: false,
+		get computePlacements() {
+			return MosaicUtils.packFixed;
+		},
+		renderItem: (index, getState) => {
+			const [getItemRef, setItemRef] = createSignal();
+			const getItemSize = ElementObserver.createBorderBoxSizeObserver(getItemRef);
+			createEffect(() => {
+				setSizeAt(index, getItemSize());
+			});
+			return (() => {
+				var _el$ = _tmpl$();
+				use(setItemRef, _el$);
+				className(_el$, elementMosaicItem);
+				insert(_el$, () => props.renderItem(() => access(props.items)[index], getState));
+				return _el$;
+			})();
+		}
+	});
+};
+//#endregion
+export { ElementMosaic };
+
+//# sourceMappingURL=ElementMosaic.js.map

package/dist/Exotics/ElementMosaic/ElementMosaic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementMosaic.js","names":["createEffect","createMemo","createSignal","Size2d","ElementObserver","access","Mosaic","ElementMosaicProps","MosaicUtils","styles","EMPTY_SIZE","width","height","ElementMosaic","props","T","getMeasuredSizes","setMeasuredSizes","getSizes","items","map","_","index","setSizeAt","size","sizes","next","_$createComponent","sizeAnchor","gap","isItemSized","computePlacements","packFixed","renderItem","getState","getItemRef","setItemRef","HTMLElement","getItemSize","createBorderBoxSizeObserver","_el$","_tmpl$","_$use","_$className","elementMosaicItem","_$insert"],"sources":["../../../src/Exotics/ElementMosaic/ElementMosaic.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal } from \"solid-js\";\n\nimport type { Size2d } from \"@thewaver/ss-utils\";\n\nimport { ElementObserver } from \"../../Abstracts/ElementObserver/ElementObserver\";\nimport { access } from \"../../Utils/propUtils\";\nimport { Mosaic } from \"../Mosaic/Mosaic\";\nimport type { ElementMosaicProps } from \"../Mosaic/Mosaic.types\";\nimport { MosaicUtils } from \"../Mosaic/Mosaic.utils\";\n\nimport * as styles from \"./ElementMosaic.css\";\n\nconst EMPTY_SIZE: Size2d = { width: 0, height: 0 };\n\nexport const ElementMosaic = <T,>(props: ElementMosaicProps<T>) => {\n    const [getMeasuredSizes, setMeasuredSizes] = createSignal<Size2d[]>([]);\n\n    const getSizes = createMemo(() => access(props.items).map((_, index) => getMeasuredSizes()[index] ?? EMPTY_SIZE));\n\n    const setSizeAt = (index: number, size: Size2d) =>\n        setMeasuredSizes((sizes) => {\n            const next = [...sizes];\n\n            next[index] = size;\n\n            return next;\n        });\n\n    return (\n        <Mosaic\n            sizeAnchor={props.sizeAnchor}\n            gap={props.gap}\n            sizes={getSizes}\n            isItemSized={false}\n            computePlacements={MosaicUtils.packFixed}\n            renderItem={(index, getState) => {\n                const [getItemRef, setItemRef] = createSignal<HTMLElement>();\n\n                const getItemSize = ElementObserver.createBorderBoxSizeObserver(getItemRef);\n\n                createEffect(() => {\n                    setSizeAt(index, getItemSize());\n                });\n\n                return (\n                    <div ref={setItemRef} class={styles.elementMosaicItem}>\n                        {props.renderItem(() => access(props.items)[index], getState)}\n                    </div>\n                );\n            }}\n        />\n    );\n};\n"],"mappings":";;;;;;;;;AAYA,IAAMU,aAAqB;CAAEC,OAAO;CAAGC,QAAQ;AAAE;AAEjD,IAAaC,iBAAqBC,UAAiC;CAC/D,MAAM,CAACE,kBAAkBC,oBAAoBf,aAAuB,CAAA,CAAE;CAEtE,MAAMgB,WAAWjB,iBAAiBI,OAAOS,MAAMK,KAAK,CAAC,CAACC,KAAKC,GAAGC,UAAUN,iBAAiB,CAAC,CAACM,UAAUZ,UAAU,CAAC;CAEhH,MAAMa,aAAaD,OAAeE,SAC9BP,kBAAkBQ,UAAU;EACxB,MAAMC,OAAO,CAAC,GAAGD,KAAK;EAEtBC,KAAKJ,SAASE;EAEd,OAAOE;CACX,CAAC;CAEL,OAAAC,gBACKrB,QAAM;EAAA,IACHsB,aAAU;GAAA,OAAEd,MAAMc;EAAU;EAAA,IAC5BC,MAAG;GAAA,OAAEf,MAAMe;EAAG;EACdJ,OAAOP;EACPY,aAAa;EAAK,IAClBC,oBAAiB;GAAA,OAAEvB,YAAYwB;EAAS;EACxCC,aAAaX,OAAOY,aAAa;GAC7B,MAAM,CAACC,YAAYC,cAAclC,aAA0B;GAE3D,MAAMoC,cAAclC,gBAAgBmC,4BAA4BJ,UAAU;GAE1EnC,mBAAmB;IACfuB,UAAUD,OAAOgB,YAAY,CAAC;GAClC,CAAC;GAED,cAAA;IAAA,IAAAE,OAAAC,OAAA;IAAAC,IACcN,YAAUI,IAAA;IAAAG,UAAAH,MAAS/B,iBAAwB;IAAAoC,OAAAL,YAChD1B,MAAMmB,iBAAiB5B,OAAOS,MAAMK,KAAK,CAAC,CAACG,QAAQY,QAAQ,CAAC;IAAA,OAAAM;GAAA,EAAA,CAAA;EAGzE;CAAC,CAAA;AAGb"}

package/dist/Exotics/FlipCard/FlipCard.css.js

@@ -0,0 +1,7 @@
+/* empty css                            */
+//#region src/Exotics/FlipCard/FlipCard.css.ts
+var flipCardRoot = "_171ld740";
+//#endregion
+export { flipCardRoot };
+
+//# sourceMappingURL=FlipCard.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlipCard.css.js","names":[],"sources":["../../../src/Exotics/FlipCard/FlipCard.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const flipCardRoot = style({\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n});\n"],"mappings":""}

package/dist/Exotics/FlipCard/FlipCard.js

@@ -0,0 +1,47 @@
+import { access } from "../../Utils/propUtils.js";
+import { Barrel } from "../../Abstracts/Barrel/Barrel.js";
+import { flipCardRoot } from "./FlipCard.css.js";
+import { createMemo } from "solid-js";
+import { className, createComponent, effect, insert, setAttribute, template } from "solid-js/web";
+//#region src/Exotics/FlipCard/FlipCard.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=group aria-roledescription="flip card">`);
+var DEFAULT_FLIP_CARD_AXIS = "row";
+var DEFAULT_FLIP_CARD_TRANSITION_DURATION_MS = 400;
+var FACES = ["front", "back"];
+var FACE_LABELS = {
+	front: "Front",
+	back: "Back"
+};
+var FACE_ROLE_DESCRIPTION = "face";
+var FlipCard = (props) => {
+	const [getIsFlipped] = props.flippedSignal;
+	const getShownFace = createMemo(() => getIsFlipped() ? "back" : "front");
+	const getFaceLabel = (face) => props.computeFaceLabel?.(face) ?? FACE_LABELS[face];
+	const getState = (face) => ({
+		face,
+		isShowing: face === getShownFace()
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		className(_el$, flipCardRoot);
+		insert(_el$, createComponent(Barrel, {
+			faces: FACES,
+			axis: () => access(props.axis) ?? DEFAULT_FLIP_CARD_AXIS,
+			faceSize: () => access(props.size),
+			angle: () => getIsFlipped() ? -180 : 0,
+			transitionDurationMs: () => access(props.transitionDurationMs) ?? DEFAULT_FLIP_CARD_TRANSITION_DURATION_MS,
+			faceRoleDescription: FACE_ROLE_DESCRIPTION,
+			computeFaceDefs: (index) => ({
+				ariaLabel: getFaceLabel(FACES[index]),
+				isHidden: FACES[index] !== getShownFace()
+			}),
+			renderFace: (getFace) => getFace() === "back" ? props.renderBack(() => getState("back")) : props.renderFront(() => getState("front"))
+		}));
+		effect(() => setAttribute(_el$, "aria-label", access(props.ariaLabel)));
+		return _el$;
+	})();
+};
+//#endregion
+export { FlipCard };
+
+//# sourceMappingURL=FlipCard.js.map

package/dist/Exotics/FlipCard/FlipCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlipCard.js","names":["createMemo","Barrel","access","FlipCardAxis","FlipCardFace","FlipCardProps","FlipCardState","styles","DEFAULT_FLIP_CARD_AXIS","DEFAULT_FLIP_CARD_TRANSITION_DURATION_MS","FACES","FACE_LABELS","Record","front","back","FLIP_ANGLE_DEG","FLIP_CARD_ROLE_DESCRIPTION","FACE_ROLE_DESCRIPTION","FlipCard","props","getIsFlipped","flippedSignal","getShownFace","getFaceLabel","face","computeFaceLabel","getState","isShowing","_el$","_tmpl$","_$className","flipCardRoot","_$insert","_$createComponent","faces","axis","faceSize","size","angle","transitionDurationMs","faceRoleDescription","computeFaceDefs","index","ariaLabel","isHidden","renderFace","getFace","renderBack","renderFront","_$effect","_$setAttribute"],"sources":["../../../src/Exotics/FlipCard/FlipCard.tsx"],"sourcesContent":["import { createMemo } from \"solid-js\";\n\nimport { Barrel } from \"../../Abstracts/Barrel/Barrel\";\nimport { access } from \"../../Utils/propUtils\";\nimport type { FlipCardAxis, FlipCardFace, FlipCardProps, FlipCardState } from \"./FlipCard.types\";\n\nimport * as styles from \"./FlipCard.css\";\n\nconst DEFAULT_FLIP_CARD_AXIS: FlipCardAxis = \"row\";\nconst DEFAULT_FLIP_CARD_TRANSITION_DURATION_MS = 400;\n\nconst FACES: FlipCardFace[] = [\"front\", \"back\"];\n\nconst FACE_LABELS: Record<FlipCardFace, string> = {\n    front: \"Front\",\n    back: \"Back\",\n};\n\nconst FLIP_ANGLE_DEG = 180;\n\nconst FLIP_CARD_ROLE_DESCRIPTION = \"flip card\";\nconst FACE_ROLE_DESCRIPTION = \"face\";\n\nexport const FlipCard = (props: FlipCardProps) => {\n    const [getIsFlipped] = props.flippedSignal;\n\n    const getShownFace = createMemo((): FlipCardFace => (getIsFlipped() ? \"back\" : \"front\"));\n\n    const getFaceLabel = (face: FlipCardFace) => props.computeFaceLabel?.(face) ?? FACE_LABELS[face];\n\n    const getState = (face: FlipCardFace): FlipCardState => ({\n        face,\n        isShowing: face === getShownFace(),\n    });\n\n    return (\n        <div\n            class={styles.flipCardRoot}\n            role=\"group\"\n            aria-roledescription={FLIP_CARD_ROLE_DESCRIPTION}\n            aria-label={access(props.ariaLabel)}\n        >\n            <Barrel<FlipCardFace>\n                faces={FACES}\n                axis={() => access(props.axis) ?? DEFAULT_FLIP_CARD_AXIS}\n                faceSize={() => access(props.size)}\n                angle={() => (getIsFlipped() ? -FLIP_ANGLE_DEG : 0)}\n                transitionDurationMs={() =>\n                    access(props.transitionDurationMs) ?? DEFAULT_FLIP_CARD_TRANSITION_DURATION_MS\n                }\n                faceRoleDescription={FACE_ROLE_DESCRIPTION}\n                computeFaceDefs={(index) => ({\n                    ariaLabel: getFaceLabel(FACES[index]!),\n                    isHidden: FACES[index] !== getShownFace(),\n                })}\n                renderFace={(getFace) =>\n                    getFace() === \"back\"\n                        ? props.renderBack(() => getState(\"back\"))\n                        : props.renderFront(() => getState(\"front\"))\n                }\n            />\n        </div>\n    );\n};\n"],"mappings":";;;;;;;AAQA,IAAMQ,yBAAuC;AAC7C,IAAMC,2CAA2C;AAEjD,IAAMC,QAAwB,CAAC,SAAS,MAAM;AAE9C,IAAMC,cAA4C;CAC9CE,OAAO;CACPC,MAAM;AACV;AAKA,IAAMG,wBAAwB;AAE9B,IAAaC,YAAYC,UAAyB;CAC9C,MAAM,CAACC,gBAAgBD,MAAME;CAE7B,MAAMC,eAAetB,iBAAgCoB,aAAa,IAAI,SAAS,OAAQ;CAEvF,MAAMG,gBAAgBC,SAAuBL,MAAMM,mBAAmBD,IAAI,KAAKb,YAAYa;CAE3F,MAAME,YAAYF,UAAuC;EACrDA;EACAG,WAAWH,SAASF,aAAa;CACrC;CAEA,cAAA;EAAA,IAAAM,OAAAC,OAAA;EAAAC,UAAAF,MAEerB,YAAmB;EAAAyB,OAAAJ,MAAAK,gBAKzBhC,QAAM;GACHiC,OAAOxB;GACPyB,YAAYjC,OAAOiB,MAAMgB,IAAI,KAAK3B;GAClC4B,gBAAgBlC,OAAOiB,MAAMkB,IAAI;GACjCC,aAAclB,aAAa,IAAI,OAAkB;GACjDmB,4BACIrC,OAAOiB,MAAMoB,oBAAoB,KAAK9B;GAE1C+B,qBAAqBvB;GACrBwB,kBAAkBC,WAAW;IACzBC,WAAWpB,aAAab,MAAMgC,MAAO;IACrCE,UAAUlC,MAAMgC,WAAWpB,aAAa;GAC5C;GACAuB,aAAaC,YACTA,QAAQ,MAAM,SACR3B,MAAM4B,iBAAiBrB,SAAS,MAAM,CAAC,IACvCP,MAAM6B,kBAAkBtB,SAAS,OAAO,CAAC;EAAC,CAAA,CAAA;EAAAuB,aAAAC,aAAAtB,MAAA,cAlB5C1B,OAAOiB,MAAMwB,SAAS,CAAC,CAAA;EAAA,OAAAf;CAAA,EAAA,CAAA;AAuB/C"}

package/dist/Exotics/Formation/Formation.css.js

@@ -0,0 +1,9 @@
+/* empty css                             */
+//#region src/Exotics/Formation/Formation.css.ts
+var formationRoot = "wls8fl0";
+var formationSpacer = "wls8fl1";
+var formationItem = "wls8fl2";
+//#endregion
+export { formationItem, formationRoot, formationSpacer };
+
+//# sourceMappingURL=Formation.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Formation.css.js","names":[],"sources":["../../../src/Exotics/Formation/Formation.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const formationRoot = style({\n    position: \"relative\",\n    containerType: \"inline-size\",\n    width: \"100%\",\n});\n\nexport const formationSpacer = style({\n    width: \"100%\",\n    pointerEvents: \"none\",\n});\n\nexport const formationItem = style({\n    position: \"absolute\",\n    transform: \"translate(-50%, -50%)\",\n});\n"],"mappings":""}

package/dist/Exotics/Formation/Formation.js

@@ -0,0 +1,60 @@
+import { access } from "../../Utils/propUtils.js";
+import { formationItem, formationRoot, formationSpacer } from "./Formation.css.js";
+import { Index, createMemo } from "solid-js";
+import { className, createComponent, effect, insert, setStyleProperty, template } from "solid-js/web";
+//#region src/Exotics/Formation/Formation.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><div aria-hidden=true>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
+var EMPTY_INSET = {
+	top: 0,
+	left: 0,
+	width: 0,
+	height: 0
+};
+var toContainerWidth = (ratio) => `${ratio * 100}cqw`;
+var Formation = (props) => {
+	const getItemCount = createMemo(() => access(props.items).length);
+	const getLayout = createMemo(() => props.computeLayout(getItemCount()));
+	const getInset = (index) => getLayout().insets[index] ?? EMPTY_INSET;
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		className(_el$, formationRoot);
+		className(_el$2, formationSpacer);
+		insert(_el$, createComponent(Index, {
+			get each() {
+				return access(props.items);
+			},
+			children: (getItem, index) => (() => {
+				var _el$3 = _tmpl$2();
+				className(_el$3, formationItem);
+				insert(_el$3, () => props.renderItem(getItem, () => ({
+					index,
+					itemCount: getItemCount(),
+					inset: getInset(index)
+				})));
+				effect((_p$) => {
+					var _v$ = toContainerWidth(getInset(index).left), _v$2 = toContainerWidth(getInset(index).top), _v$3 = toContainerWidth(getInset(index).width), _v$4 = toContainerWidth(getInset(index).height), _v$5 = access(props.isStackedInReverse) ? getItemCount() - index : index + 1;
+					_v$ !== _p$.e && setStyleProperty(_el$3, "left", _p$.e = _v$);
+					_v$2 !== _p$.t && setStyleProperty(_el$3, "top", _p$.t = _v$2);
+					_v$3 !== _p$.a && setStyleProperty(_el$3, "width", _p$.a = _v$3);
+					_v$4 !== _p$.o && setStyleProperty(_el$3, "height", _p$.o = _v$4);
+					_v$5 !== _p$.i && setStyleProperty(_el$3, "z-index", _p$.i = _v$5);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0,
+					i: void 0
+				});
+				return _el$3;
+			})()
+		}), null);
+		effect((_$p) => setStyleProperty(_el$2, "height", toContainerWidth(getLayout().heightRatio)));
+		return _el$;
+	})();
+};
+//#endregion
+export { Formation };
+
+//# sourceMappingURL=Formation.js.map

package/dist/Exotics/Formation/Formation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formation.js","names":["Index","createMemo","access","FormationInset","FormationProps","styles","EMPTY_INSET","top","left","width","height","toContainerWidth","ratio","Formation","props","T","getItemCount","items","length","getLayout","computeLayout","getInset","index","insets","_el$","_tmpl$","_el$2","firstChild","_$className","formationRoot","formationSpacer","_$insert","_$createComponent","each","children","getItem","_el$3","_tmpl$2","formationItem","renderItem","itemCount","inset","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_v$5","isStackedInReverse","e","_$setStyleProperty","t","a","o","i","undefined","_$p","heightRatio"],"sources":["../../../src/Exotics/Formation/Formation.tsx"],"sourcesContent":["import { Index, createMemo } from \"solid-js\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport type { FormationInset, FormationProps } from \"./Formation.types\";\n\nimport * as styles from \"./Formation.css\";\n\nconst EMPTY_INSET: FormationInset = { top: 0, left: 0, width: 0, height: 0 };\n\nconst toContainerWidth = (ratio: number) => `${ratio * 100}cqw`;\n\nexport const Formation = <T,>(props: FormationProps<T>) => {\n    const getItemCount = createMemo(() => access(props.items).length);\n\n    const getLayout = createMemo(() => props.computeLayout(getItemCount()));\n\n    const getInset = (index: number) => getLayout().insets[index] ?? EMPTY_INSET;\n\n    return (\n        <div class={styles.formationRoot}>\n            <div\n                class={styles.formationSpacer}\n                style={{ height: toContainerWidth(getLayout().heightRatio) }}\n                aria-hidden=\"true\"\n            />\n\n            <Index each={access(props.items)}>\n                {(getItem, index) => (\n                    <div\n                        class={styles.formationItem}\n                        style={{\n                            \"left\": toContainerWidth(getInset(index).left),\n                            \"top\": toContainerWidth(getInset(index).top),\n                            \"width\": toContainerWidth(getInset(index).width),\n                            \"height\": toContainerWidth(getInset(index).height),\n                            \"z-index\": access(props.isStackedInReverse) ? getItemCount() - index : index + 1,\n                        }}\n                    >\n                        {props.renderItem(getItem, () => ({\n                            index,\n                            itemCount: getItemCount(),\n                            inset: getInset(index),\n                        }))}\n                    </div>\n                )}\n            </Index>\n        </div>\n    );\n};\n"],"mappings":";;;;;;;AAOA,IAAMM,cAA8B;CAAEC,KAAK;CAAGC,MAAM;CAAGC,OAAO;CAAGC,QAAQ;AAAE;AAE3E,IAAMC,oBAAoBC,UAAkB,GAAGA,QAAQ,IAAG;AAE1D,IAAaC,aAAiBC,UAA6B;CACvD,MAAME,eAAef,iBAAiBC,OAAOY,MAAMG,KAAK,CAAC,CAACC,MAAM;CAEhE,MAAMC,YAAYlB,iBAAiBa,MAAMM,cAAcJ,aAAa,CAAC,CAAC;CAEtE,MAAMK,YAAYC,UAAkBH,UAAU,CAAC,CAACI,OAAOD,UAAUhB;CAEjE,cAAA;EAAA,IAAAkB,OAAAC,OAAA,GAAAC,QAAAF,KAAAG;EAAAC,UAAAJ,MACgBnB,aAAoB;EAAAuB,UAAAF,OAEjBrB,eAAsB;EAAA0B,OAAAP,MAAAQ,gBAKhChC,OAAK;GAAA,IAACiC,OAAI;IAAA,OAAE/B,OAAOY,MAAMG,KAAK;GAAC;GAAAiB,WAC1BC,SAASb,iBAAK;IAAA,IAAAc,QAAAC,QAAA;IAAAT,UAAAQ,OAED/B,aAAoB;IAAA0B,OAAAK,aAS1BtB,MAAMyB,WAAWJ,gBAAgB;KAC9Bb;KACAkB,WAAWxB,aAAa;KACxByB,OAAOpB,SAASC,KAAK;IACzB,EAAE,CAAC;IAAAoB,QAAAC,QAAA;KAAA,IAAAC,MAXSjC,iBAAiBU,SAASC,KAAK,CAAC,CAACd,IAAI,GAACqC,OACvClC,iBAAiBU,SAASC,KAAK,CAAC,CAACf,GAAG,GAACuC,OACnCnC,iBAAiBU,SAASC,KAAK,CAAC,CAACb,KAAK,GAACsC,OACtCpC,iBAAiBU,SAASC,KAAK,CAAC,CAACZ,MAAM,GAACsC,OACvC9C,OAAOY,MAAMmC,kBAAkB,IAAIjC,aAAa,IAAIM,QAAQA,QAAQ;KAACsB,QAAAD,IAAAO,KAAAC,iBAAAf,OAAA,QAAAO,IAAAO,IAAAN,GAAA;KAAAC,SAAAF,IAAAS,KAAAD,iBAAAf,OAAA,OAAAO,IAAAS,IAAAP,IAAA;KAAAC,SAAAH,IAAAU,KAAAF,iBAAAf,OAAA,SAAAO,IAAAU,IAAAP,IAAA;KAAAC,SAAAJ,IAAAW,KAAAH,iBAAAf,OAAA,UAAAO,IAAAW,IAAAP,IAAA;KAAAC,SAAAL,IAAAY,KAAAJ,iBAAAf,OAAA,WAAAO,IAAAY,IAAAP,IAAA;KAAA,OAAAL;IAAA,GAAA;KAAAO,GAAAM,KAAAA;KAAAJ,GAAAI,KAAAA;KAAAH,GAAAG,KAAAA;KAAAF,GAAAE,KAAAA;KAAAD,GAAAC,KAAAA;IAAA,CAAA;IAAA,OAAApB;GAAA,EAAA,CAAA;EAS3F,CAAA,GAAA,IAAA;EAAAM,QAAAe,QAAAN,iBAAAzB,OAAA,UAtBgBf,iBAAiBQ,UAAU,CAAC,CAACuC,WAAW,CAAC,CAAA;EAAA,OAAAlC;CAAA,EAAA,CAAA;AA0B1E"}

package/dist/Exotics/ImageMosaic/ImageMosaic.css.js

@@ -0,0 +1,7 @@
+/* empty css                               */
+//#region src/Exotics/ImageMosaic/ImageMosaic.css.ts
+var imageMosaicImage = "fjvlad0";
+//#endregion
+export { imageMosaicImage };
+
+//# sourceMappingURL=ImageMosaic.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageMosaic.css.js","names":[],"sources":["../../../src/Exotics/ImageMosaic/ImageMosaic.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const imageMosaicImage = style({\n    display: \"block\",\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n});\n"],"mappings":""}

package/dist/Exotics/ImageMosaic/ImageMosaic.js

@@ -0,0 +1,80 @@
+import { access } from "../../Utils/propUtils.js";
+import { MosaicUtils } from "../Mosaic/Mosaic.utils.js";
+import { Mosaic } from "../Mosaic/Mosaic.js";
+import { imageMosaicImage } from "./ImageMosaic.css.js";
+import { createEffect, createMemo, createSignal, untrack } from "solid-js";
+import { className, createComponent, effect, setAttribute, template } from "solid-js/web";
+//#region src/Exotics/ImageMosaic/ImageMosaic.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<img decoding=async>`);
+var DEFAULT_TARGET_ASPECT_RATIO = {
+	width: 1,
+	height: 1
+};
+var UNREADABLE_IMAGE_SIZE = {
+	width: 1,
+	height: 1
+};
+var EMPTY_SIZE = {
+	width: 0,
+	height: 0
+};
+var ImageMosaic = (props) => {
+	const [getSizeBySrc, setSizeBySrc] = createSignal({});
+	const setSizeOf = (src, size) => setSizeBySrc((sizes) => ({
+		...sizes,
+		[src]: size
+	}));
+	createEffect(() => {
+		const sources = access(props.sources);
+		const known = untrack(getSizeBySrc);
+		setSizeBySrc(Object.fromEntries(sources.filter((source) => known[source.src]).map((source) => [source.src, known[source.src]])));
+		for (const source of sources) {
+			if (known[source.src]) continue;
+			const image = new Image();
+			image.decoding = "async";
+			image.addEventListener("load", () => setSizeOf(source.src, {
+				width: image.naturalWidth,
+				height: image.naturalHeight
+			}));
+			image.addEventListener("error", () => setSizeOf(source.src, UNREADABLE_IMAGE_SIZE));
+			image.src = source.src;
+		}
+	});
+	const getSizes = createMemo(() => access(props.sources).map((source) => getSizeBySrc()[source.src] ?? EMPTY_SIZE));
+	const getTargetAspectRatio = createMemo(() => {
+		const targetAspectRatio = access(props.targetAspectRatio) ?? DEFAULT_TARGET_ASPECT_RATIO;
+		return access(props.sizeAnchor) === "height" ? MosaicUtils.transposeSize(targetAspectRatio) : targetAspectRatio;
+	});
+	return createComponent(Mosaic, {
+		get sizeAnchor() {
+			return props.sizeAnchor;
+		},
+		get gap() {
+			return props.gap;
+		},
+		sizes: getSizes,
+		isItemSized: true,
+		computePlacements: (defs) => MosaicUtils.packScaled(defs, getTargetAspectRatio()),
+		renderItem: (index, getState) => {
+			const renderImage = () => (() => {
+				var _el$ = _tmpl$();
+				className(_el$, imageMosaicImage);
+				effect((_p$) => {
+					var _v$ = access(props.sources)[index]?.src, _v$2 = access(props.sources)[index]?.alt;
+					_v$ !== _p$.e && setAttribute(_el$, "src", _p$.e = _v$);
+					_v$2 !== _p$.t && setAttribute(_el$, "alt", _p$.t = _v$2);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$;
+			})();
+			return props.renderItem ? props.renderItem(renderImage, getState) : renderImage();
+		}
+	});
+};
+//#endregion
+export { ImageMosaic };
+
+//# sourceMappingURL=ImageMosaic.js.map

package/dist/Exotics/ImageMosaic/ImageMosaic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageMosaic.js","names":["createEffect","createMemo","createSignal","untrack","Size2d","access","Mosaic","ImageMosaicProps","MosaicUtils","styles","DEFAULT_TARGET_ASPECT_RATIO","width","height","UNREADABLE_IMAGE_SIZE","EMPTY_SIZE","ImageMosaic","props","getSizeBySrc","setSizeBySrc","Record","setSizeOf","src","size","sizes","sources","known","Object","fromEntries","filter","source","map","image","Image","decoding","addEventListener","naturalWidth","naturalHeight","getSizes","getTargetAspectRatio","targetAspectRatio","sizeAnchor","transposeSize","_$createComponent","gap","isItemSized","computePlacements","defs","packScaled","renderItem","index","getState","renderImage","_el$","_tmpl$","_$className","imageMosaicImage","_$effect","_p$","_v$","_v$2","alt","e","_$setAttribute","t","undefined"],"sources":["../../../src/Exotics/ImageMosaic/ImageMosaic.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, untrack } from \"solid-js\";\n\nimport type { Size2d } from \"@thewaver/ss-utils\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport { Mosaic } from \"../Mosaic/Mosaic\";\nimport type { ImageMosaicProps } from \"../Mosaic/Mosaic.types\";\nimport { MosaicUtils } from \"../Mosaic/Mosaic.utils\";\n\nimport * as styles from \"./ImageMosaic.css\";\n\nconst DEFAULT_TARGET_ASPECT_RATIO: Size2d = { width: 1, height: 1 };\nconst UNREADABLE_IMAGE_SIZE: Size2d = { width: 1, height: 1 };\nconst EMPTY_SIZE: Size2d = { width: 0, height: 0 };\n\nexport const ImageMosaic = (props: ImageMosaicProps) => {\n    const [getSizeBySrc, setSizeBySrc] = createSignal<Record<string, Size2d>>({});\n\n    const setSizeOf = (src: string, size: Size2d) => setSizeBySrc((sizes) => ({ ...sizes, [src]: size }));\n\n    createEffect(() => {\n        const sources = access(props.sources);\n        const known = untrack(getSizeBySrc);\n\n        setSizeBySrc(\n            Object.fromEntries(\n                sources.filter((source) => known[source.src]).map((source) => [source.src, known[source.src]]),\n            ),\n        );\n\n        for (const source of sources) {\n            if (known[source.src]) continue;\n\n            const image = new Image();\n\n            image.decoding = \"async\";\n            image.addEventListener(\"load\", () =>\n                setSizeOf(source.src, { width: image.naturalWidth, height: image.naturalHeight }),\n            );\n            image.addEventListener(\"error\", () => setSizeOf(source.src, UNREADABLE_IMAGE_SIZE));\n            image.src = source.src;\n        }\n    });\n\n    const getSizes = createMemo(() => access(props.sources).map((source) => getSizeBySrc()[source.src] ?? EMPTY_SIZE));\n\n    const getTargetAspectRatio = createMemo(() => {\n        const targetAspectRatio = access(props.targetAspectRatio) ?? DEFAULT_TARGET_ASPECT_RATIO;\n\n        return access(props.sizeAnchor) === \"height\" ? MosaicUtils.transposeSize(targetAspectRatio) : targetAspectRatio;\n    });\n\n    return (\n        <Mosaic\n            sizeAnchor={props.sizeAnchor}\n            gap={props.gap}\n            sizes={getSizes}\n            isItemSized={true}\n            computePlacements={(defs) => MosaicUtils.packScaled(defs, getTargetAspectRatio())}\n            renderItem={(index, getState) => {\n                const renderImage = () => (\n                    <img\n                        class={styles.imageMosaicImage}\n                        src={access(props.sources)[index]?.src}\n                        alt={access(props.sources)[index]?.alt}\n                        decoding=\"async\"\n                    />\n                );\n\n                return props.renderItem ? props.renderItem(renderImage, getState) : renderImage();\n            }}\n        />\n    );\n};\n"],"mappings":";;;;;;;;AAWA,IAAMU,8BAAsC;CAAEC,OAAO;CAAGC,QAAQ;AAAE;AAClE,IAAMC,wBAAgC;CAAEF,OAAO;CAAGC,QAAQ;AAAE;AAC5D,IAAME,aAAqB;CAAEH,OAAO;CAAGC,QAAQ;AAAE;AAEjD,IAAaG,eAAeC,UAA4B;CACpD,MAAM,CAACC,cAAcC,gBAAgBhB,aAAqC,CAAC,CAAC;CAE5E,MAAMkB,aAAaC,KAAaC,SAAiBJ,cAAcK,WAAW;EAAE,GAAGA;GAAQF,MAAMC;CAAK,EAAE;CAEpGtB,mBAAmB;EACf,MAAMwB,UAAUnB,OAAOW,MAAMQ,OAAO;EACpC,MAAMC,QAAQtB,QAAQc,YAAY;EAElCC,aACIQ,OAAOC,YACHH,QAAQI,QAAQC,WAAWJ,MAAMI,OAAOR,IAAI,CAAC,CAACS,KAAKD,WAAW,CAACA,OAAOR,KAAKI,MAAMI,OAAOR,IAAI,CAAC,CACjG,CACJ;EAEA,KAAK,MAAMQ,UAAUL,SAAS;GAC1B,IAAIC,MAAMI,OAAOR,MAAM;GAEvB,MAAMU,QAAQ,IAAIC,MAAM;GAExBD,MAAME,WAAW;GACjBF,MAAMG,iBAAiB,cACnBd,UAAUS,OAAOR,KAAK;IAAEV,OAAOoB,MAAMI;IAAcvB,QAAQmB,MAAMK;GAAc,CAAC,CACpF;GACAL,MAAMG,iBAAiB,eAAed,UAAUS,OAAOR,KAAKR,qBAAqB,CAAC;GAClFkB,MAAMV,MAAMQ,OAAOR;EACvB;CACJ,CAAC;CAED,MAAMgB,WAAWpC,iBAAiBI,OAAOW,MAAMQ,OAAO,CAAC,CAACM,KAAKD,WAAWZ,aAAa,CAAC,CAACY,OAAOR,QAAQP,UAAU,CAAC;CAEjH,MAAMwB,uBAAuBrC,iBAAiB;EAC1C,MAAMsC,oBAAoBlC,OAAOW,MAAMuB,iBAAiB,KAAK7B;EAE7D,OAAOL,OAAOW,MAAMwB,UAAU,MAAM,WAAWhC,YAAYiC,cAAcF,iBAAiB,IAAIA;CAClG,CAAC;CAED,OAAAG,gBACKpC,QAAM;EAAA,IACHkC,aAAU;GAAA,OAAExB,MAAMwB;EAAU;EAAA,IAC5BG,MAAG;GAAA,OAAE3B,MAAM2B;EAAG;EACdpB,OAAOc;EACPO,aAAa;EACbC,oBAAoBC,SAAStC,YAAYuC,WAAWD,MAAMR,qBAAqB,CAAC;EAChFU,aAAaC,OAAOC,aAAa;GAC7B,MAAMC,2BAAc;IAAA,IAAAC,OAAAC,OAAA;IAAAC,UAAAF,MAEL3C,gBAAuB;IAAA+C,QAAAC,QAAA;KAAA,IAAAC,MACzBrD,OAAOW,MAAMQ,OAAO,CAAC,CAACyB,MAAM,EAAE5B,KAAGsC,OACjCtD,OAAOW,MAAMQ,OAAO,CAAC,CAACyB,MAAM,EAAEW;KAAGF,QAAAD,IAAAI,KAAAC,aAAAV,MAAA,OAAAK,IAAAI,IAAAH,GAAA;KAAAC,SAAAF,IAAAM,KAAAD,aAAAV,MAAA,OAAAK,IAAAM,IAAAJ,IAAA;KAAA,OAAAF;IAAA,GAAA;KAAAI,GAAAG,KAAAA;KAAAD,GAAAC,KAAAA;IAAA,CAAA;IAAA,OAAAZ;GAAA,EAAA,CAAA;GAK9C,OAAOpC,MAAMgC,aAAahC,MAAMgC,WAAWG,aAAaD,QAAQ,IAAIC,YAAY;EACpF;CAAC,CAAA;AAGb"}

package/dist/Exotics/Mosaic/Mosaic.css.js

@@ -0,0 +1,9 @@
+/* empty css                          */
+//#region src/Exotics/Mosaic/Mosaic.css.ts
+var mosaicRoot = "_13dysbq0";
+var mosaicItem = "_13dysbq1";
+var mosaicSizedItem = "_13dysbq2";
+//#endregion
+export { mosaicItem, mosaicRoot, mosaicSizedItem };
+
+//# sourceMappingURL=Mosaic.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Mosaic.css.js","names":[],"sources":["../../../src/Exotics/Mosaic/Mosaic.css.ts"],"sourcesContent":["import { globalStyle, style } from \"@vanilla-extract/css\";\n\nexport const mosaicRoot = style({\n    position: \"relative\",\n});\n\nexport const mosaicItem = style({\n    position: \"absolute\",\n});\n\nexport const mosaicSizedItem = style({\n    display: \"grid\",\n});\n\nglobalStyle(`${mosaicSizedItem} > *`, {\n    gridArea: \"1 / 1\",\n});\n"],"mappings":""}