@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Exotics/ScreenWiper/ScreenWiper.js

@@ -0,0 +1,119 @@
+import { useViewportContext } from "../Viewport/Viewport.context.js";
+import { access } from "../../Utils/propUtils.js";
+import { screenWiperCellShapes, screenWiperRoot, screenWiperRow } from "./ScreenWiper.css.js";
+import { For, Show, createEffect, createMemo, createSignal, on, onCleanup, untrack } from "solid-js";
+import { MathUtils } from "@thewaver/ss-utils";
+import { Portal, className, createComponent, effect, insert, setStyleProperty, template, use } from "solid-js/web";
+//#region src/Exotics/ScreenWiper/ScreenWiper.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div aria-hidden=true>`);
+var DEFAULT_SCREENWIPER_SHAPE = "lozenge";
+var DEFAULT_SCREENWIPER_TRANSITION_DURATION_MS = 200;
+var DEFAULT_SCREENWIPER_CELL_SIZE = 120;
+var TRANSITION_STAGGER_FACTOR = .05;
+var getTargetFromDirection = (direction) => direction === "in" ? 1 : 0;
+var ScreenWiper = (props) => {
+	const viewportContext = useViewportContext();
+	const [getTarget, setTarget] = createSignal(getTargetFromDirection(access(props.initialWipeDirection)));
+	const [getHasFinished, setHasFinished] = createSignal(true);
+	const getCellSize = createMemo(() => access(props.cellSize) ?? DEFAULT_SCREENWIPER_CELL_SIZE);
+	const getTransitionDurationMs = createMemo(() => access(props.transitionDurationMs) ?? DEFAULT_SCREENWIPER_TRANSITION_DURATION_MS);
+	const getCols = createMemo(() => {
+		const count = Math.ceil(viewportContext.getSize().width / getCellSize());
+		return {
+			odd: Array.from({ length: count }, (_, index) => index),
+			even: Array.from({ length: count + 1 }, (_, index) => index)
+		};
+	});
+	const getRows = createMemo(() => Array.from({ length: Math.ceil(viewportContext.getSize().height * 2 / getCellSize()) + 1 }, (_, i) => i));
+	const [getRootRef, setRootRef] = createSignal();
+	const getShape = createMemo(() => access(props.shape) ?? DEFAULT_SCREENWIPER_SHAPE);
+	createEffect(() => {
+		const direction = access(props.wipeDirection);
+		untrack(() => {
+			const newTarget = getTargetFromDirection(direction);
+			if (newTarget === getTarget()) return;
+			setHasFinished(false);
+			setTimeout(() => {
+				setTarget(newTarget);
+			}, 0);
+		});
+	});
+	createEffect(on(getTarget, () => {
+		const rootRef = getRootRef();
+		if (!rootRef) return;
+		const direction = access(props.wipeDirection);
+		rootRef.offsetHeight;
+		const animations = rootRef.getAnimations({ subtree: true });
+		let isCancelled = false;
+		onCleanup(() => {
+			isCancelled = true;
+		});
+		Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+			if (isCancelled) return;
+			setHasFinished(true);
+			props.onTransitionEnd?.(direction);
+		});
+	}, { defer: true }));
+	return createComponent(Show, {
+		get when() {
+			return getTarget() === 1 || !getHasFinished();
+		},
+		get children() {
+			return createComponent(Portal, {
+				get mount() {
+					return viewportContext.getPortalRef();
+				},
+				get children() {
+					var _el$ = _tmpl$();
+					use(setRootRef, _el$);
+					className(_el$, screenWiperRoot);
+					insert(_el$, createComponent(For, {
+						get each() {
+							return getRows();
+						},
+						children: (row) => {
+							const isRowEven = MathUtils.isEven(row);
+							const getRowCols = () => isRowEven ? getCols().even : getCols().odd;
+							return (() => {
+								var _el$2 = _tmpl$();
+								className(_el$2, screenWiperRow);
+								insert(_el$2, createComponent(For, {
+									get each() {
+										return getRowCols();
+									},
+									children: (col) => (() => {
+										var _el$3 = _tmpl$2();
+										effect((_p$) => {
+											var _v$ = screenWiperCellShapes[getShape()], _v$2 = `${getCellSize()}px`, _v$3 = `${getCellSize()}px`, _v$4 = `transform ${getTransitionDurationMs()}ms ease ${getTransitionDurationMs() * TRANSITION_STAGGER_FACTOR * (col + row)}ms`, _v$5 = `scale(${getTarget()})`;
+											_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+											_v$2 !== _p$.t && setStyleProperty(_el$3, "width", _p$.t = _v$2);
+											_v$3 !== _p$.a && setStyleProperty(_el$3, "height", _p$.a = _v$3);
+											_v$4 !== _p$.o && setStyleProperty(_el$3, "transition", _p$.o = _v$4);
+											_v$5 !== _p$.i && setStyleProperty(_el$3, "transform", _p$.i = _v$5);
+											return _p$;
+										}, {
+											e: void 0,
+											t: void 0,
+											a: void 0,
+											o: void 0,
+											i: void 0
+										});
+										return _el$3;
+									})()
+								}));
+								effect((_$p) => setStyleProperty(_el$2, "transform", `translate(${isRowEven ? getCellSize() * -.5 : 0}px, ${(row + 1) * getCellSize() * -.5}px)`));
+								return _el$2;
+							})();
+						}
+					}));
+					return _el$;
+				}
+			});
+		}
+	});
+};
+//#endregion
+export { ScreenWiper };
+
+//# sourceMappingURL=ScreenWiper.js.map

package/dist/Exotics/ScreenWiper/ScreenWiper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenWiper.js","names":["For","Show","createEffect","createMemo","createSignal","on","onCleanup","untrack","Portal","MathUtils","access","useViewportContext","ScreenWiperDirection","ScreenWiperProps","ScreenWiperShape","styles","DEFAULT_SCREENWIPER_SHAPE","DEFAULT_SCREENWIPER_TRANSITION_DURATION_MS","DEFAULT_SCREENWIPER_CELL_SIZE","TRANSITION_STAGGER_FACTOR","getTargetFromDirection","direction","ScreenWiper","props","viewportContext","getTarget","setTarget","initialWipeDirection","getHasFinished","setHasFinished","getCellSize","cellSize","getTransitionDurationMs","transitionDurationMs","getCols","count","Math","ceil","getSize","width","odd","Array","from","length","_","index","even","getRows","height","i","getRootRef","setRootRef","HTMLElement","getShape","shape","wipeDirection","newTarget","setTimeout","rootRef","offsetHeight","animations","getAnimations","subtree","isCancelled","Promise","allSettled","map","animation","finished","then","onTransitionEnd","defer","_$createComponent","when","children","mount","getPortalRef","_el$","_tmpl$","_$use","_$className","screenWiperRoot","_$insert","each","row","isRowEven","isEven","getRowCols","_el$2","screenWiperRow","col","_el$3","_tmpl$2","_$effect","_p$","_v$","screenWiperCellShapes","_v$2","_v$3","_v$4","_v$5","e","t","_$setStyleProperty","a","o","undefined","_$p"],"sources":["../../../src/Exotics/ScreenWiper/ScreenWiper.tsx"],"sourcesContent":["import { For, Show, createEffect, createMemo, createSignal, on, onCleanup, untrack } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\n\nimport { MathUtils } from \"@thewaver/ss-utils\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport { useViewportContext } from \"../Viewport/Viewport.context\";\nimport type { ScreenWiperDirection, ScreenWiperProps, ScreenWiperShape } from \"./ScreenWiper.types\";\n\nimport * as styles from \"./ScreenWiper.css\";\n\nconst DEFAULT_SCREENWIPER_SHAPE: ScreenWiperShape = \"lozenge\";\nconst DEFAULT_SCREENWIPER_TRANSITION_DURATION_MS = 200;\nconst DEFAULT_SCREENWIPER_CELL_SIZE: number = 120;\nconst TRANSITION_STAGGER_FACTOR = 0.05;\n\nconst getTargetFromDirection = (direction: ScreenWiperDirection) => (direction === \"in\" ? 1 : 0);\n\nexport const ScreenWiper = (props: ScreenWiperProps) => {\n    const viewportContext = useViewportContext();\n\n    const [getTarget, setTarget] = createSignal(getTargetFromDirection(access(props.initialWipeDirection)));\n    const [getHasFinished, setHasFinished] = createSignal(true);\n\n    const getCellSize = createMemo(() => access(props.cellSize) ?? DEFAULT_SCREENWIPER_CELL_SIZE);\n\n    const getTransitionDurationMs = createMemo(\n        () => access(props.transitionDurationMs) ?? DEFAULT_SCREENWIPER_TRANSITION_DURATION_MS,\n    );\n\n    const getCols = createMemo(() => {\n        const count = Math.ceil(viewportContext.getSize().width / getCellSize());\n\n        return {\n            odd: Array.from({ length: count }, (_, index) => index),\n            even: Array.from({ length: count + 1 }, (_, index) => index),\n        };\n    });\n\n    const getRows = createMemo(() =>\n        Array.from({ length: Math.ceil((viewportContext.getSize().height * 2) / getCellSize()) + 1 }, (_, i) => i),\n    );\n\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\n\n    const getShape = createMemo(() => access(props.shape) ?? DEFAULT_SCREENWIPER_SHAPE);\n\n    createEffect(() => {\n        const direction = access(props.wipeDirection);\n\n        untrack(() => {\n            const newTarget = getTargetFromDirection(direction);\n\n            if (newTarget === getTarget()) return;\n\n            setHasFinished(false);\n            setTimeout(() => {\n                setTarget(newTarget);\n            }, 0);\n        });\n    });\n\n    createEffect(\n        on(\n            getTarget,\n            () => {\n                const rootRef = getRootRef();\n\n                if (!rootRef) return;\n\n                const direction = access(props.wipeDirection);\n\n                void rootRef.offsetHeight;\n\n                const animations = rootRef.getAnimations({ subtree: true });\n\n                let isCancelled = false;\n\n                onCleanup(() => {\n                    isCancelled = true;\n                });\n\n                void Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {\n                    if (isCancelled) return;\n\n                    setHasFinished(true);\n                    props.onTransitionEnd?.(direction);\n                });\n            },\n            { defer: true },\n        ),\n    );\n\n    return (\n        <Show when={getTarget() === 1 || !getHasFinished()}>\n            <Portal mount={viewportContext.getPortalRef()}>\n                <div ref={setRootRef} class={styles.screenWiperRoot}>\n                    <For each={getRows()}>\n                        {(row) => {\n                            const isRowEven = MathUtils.isEven(row);\n                            const getRowCols = () => (isRowEven ? getCols().even : getCols().odd);\n\n                            return (\n                                <div\n                                    class={styles.screenWiperRow}\n                                    style={{\n                                        transform: `translate(${isRowEven ? getCellSize() * -0.5 : 0}px, ${(row + 1) * getCellSize() * -0.5}px)`,\n                                    }}\n                                >\n                                    <For each={getRowCols()}>\n                                        {(col) => (\n                                            <div\n                                                class={styles.screenWiperCellShapes[getShape()]}\n                                                aria-hidden=\"true\"\n                                                style={{\n                                                    width: `${getCellSize()}px`,\n                                                    height: `${getCellSize()}px`,\n                                                    transition: `transform ${getTransitionDurationMs()}ms ease ${getTransitionDurationMs() * TRANSITION_STAGGER_FACTOR * (col + row)}ms`,\n                                                    transform: `scale(${getTarget()})`,\n                                                }}\n                                            />\n                                        )}\n                                    </For>\n                                </div>\n                            );\n                        }}\n                    </For>\n                </div>\n            </Portal>\n        </Show>\n    );\n};\n"],"mappings":"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"}

package/dist/Exotics/Shape/Shape.css.js

@@ -0,0 +1,9 @@
+/* empty css                         */
+//#region src/Exotics/Shape/Shape.css.ts
+var shapeRoot = "_3tqh7l0";
+var shapeStrokeSVG = "_3tqh7l2 _3tqh7l1";
+var shapeFillSVG = "_3tqh7l3 _3tqh7l1";
+//#endregion
+export { shapeFillSVG, shapeRoot, shapeStrokeSVG };
+
+//# sourceMappingURL=Shape.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Shape.css.js","names":[],"sources":["../../../src/Exotics/Shape/Shape.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const shapeRoot = style({\n    position: \"relative\",\n    pointerEvents: \"visiblePainted\",\n});\n\nconst shapeSVG = style({\n    position: \"absolute\",\n    inset: 0,\n});\n\nexport const shapeStrokeSVG = style([\n    shapeSVG,\n    {\n        zIndex: 1,\n        pointerEvents: \"none\",\n    },\n]);\n\nexport const shapeFillSVG = style([\n    shapeSVG,\n    {\n        zIndex: -1,\n    },\n]);\n"],"mappings":""}

package/dist/Exotics/Shape/Shape.js

@@ -0,0 +1,175 @@
+import { access } from "../../Utils/propUtils.js";
+import { shapeRoot } from "./Shape.css.js";
+import { For, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import { ObjectUtils, ShapeUtils } from "@thewaver/ss-utils";
+import { className, createComponent, effect, insert, memo, setAttribute, style, template, use } from "solid-js/web";
+//#region src/Exotics/Shape/Shape.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<svg overflow=visible><defs>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<svg><path></svg>`, false, true, false);
+var _tmpl$4 = /*#__PURE__*/ template(`<svg><path fill-rule=evenodd></svg>`, false, true, false);
+var DEFAULT_STROKE_GEOM = { thicknesses: [0] };
+var Shape = (props) => {
+	const [getRootRef, setRootRef] = createSignal();
+	const [getRootSize, setRootSize] = createSignal({
+		width: 0,
+		height: 0
+	});
+	const getFillDefs = createMemo(() => {
+		return props.computeFillDefs?.(getRootSize);
+	});
+	const getStrokeDefs = createMemo(() => {
+		return props.computeStrokeDefs?.(getRootSize);
+	});
+	const getPaths = createMemo(() => {
+		const pts = props.computePoints(getRootSize());
+		const cache = {};
+		const strokeDefs = getStrokeDefs();
+		const strokeGeom = access(props.strokeGeom) ?? [];
+		if (!strokeDefs?.length) return [ShapeUtils.getPaths(pts, [0], access(props.joinRadii), access(props.lameExponents))];
+		return ObjectUtils.zipArray("stretch", strokeDefs, strokeGeom.length ? strokeGeom : [DEFAULT_STROKE_GEOM]).map(([, geom]) => {
+			const { thicknesses, offset } = geom;
+			const key = `${thicknesses.map((t) => Math.floor(t)).join("_")}_${offset ?? ""}`;
+			if (cache[key]) return cache[key];
+			const paths = ShapeUtils.getPaths(pts, thicknesses, access(props.joinRadii), access(props.lameExponents), offset);
+			cache[key] = paths;
+			return paths;
+		});
+	});
+	onMount(() => {
+		let rootResizeObserver;
+		onCleanup(() => {
+			rootResizeObserver?.disconnect();
+		});
+		const rootRef = getRootRef();
+		if (!rootRef) return;
+		rootResizeObserver = new ResizeObserver(() => {
+			setRootSize({
+				width: rootRef.offsetWidth,
+				height: rootRef.offsetHeight
+			});
+		});
+		rootResizeObserver.observe(rootRef);
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		use(setRootRef, _el$);
+		className(_el$, shapeRoot);
+		insert(_el$, (() => {
+			var _c$ = memo(() => !!getFillDefs());
+			return () => _c$() && (() => {
+				var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
+				setAttribute(_el$2, "class", "_3tqh7l3 _3tqh7l1");
+				insert(_el$3, createComponent(For, {
+					get each() {
+						return getFillDefs();
+					},
+					children: (def) => [
+						memo(() => def.gradientOrPattern?.renderDefsElement()),
+						memo(() => def.filter?.renderDefsElement()),
+						memo(() => def.clipPath?.renderDefsElement())
+					]
+				}));
+				insert(_el$2, createComponent(For, {
+					get each() {
+						return getFillDefs();
+					},
+					children: (def) => (() => {
+						var _el$4 = _tmpl$3();
+						effect((_p$) => {
+							var _v$4 = getPaths()[0].outerPath, _v$5 = def.gradientOrPattern ? `url(#${def.gradientOrPattern?.id})` : def.color, _v$6 = def.opacity, _v$7 = def.filter ? `url(#${def.filter?.id})` : void 0, _v$8 = def.clipPath ? `url(#${def.clipPath?.id})` : void 0, _v$9 = def.blend ? { "mix-blend-mode": "screen" } : void 0;
+							_v$4 !== _p$.e && setAttribute(_el$4, "d", _p$.e = _v$4);
+							_v$5 !== _p$.t && setAttribute(_el$4, "fill", _p$.t = _v$5);
+							_v$6 !== _p$.a && setAttribute(_el$4, "fill-opacity", _p$.a = _v$6);
+							_v$7 !== _p$.o && setAttribute(_el$4, "filter", _p$.o = _v$7);
+							_v$8 !== _p$.i && setAttribute(_el$4, "clip-path", _p$.i = _v$8);
+							_p$.n = style(_el$4, _v$9, _p$.n);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0,
+							o: void 0,
+							i: void 0,
+							n: void 0
+						});
+						return _el$4;
+					})()
+				}), null);
+				effect((_p$) => {
+					var _v$ = getRootSize().width, _v$2 = getRootSize().height, _v$3 = `0 0 ${getRootSize().width} ${getRootSize().height}`;
+					_v$ !== _p$.e && setAttribute(_el$2, "width", _p$.e = _v$);
+					_v$2 !== _p$.t && setAttribute(_el$2, "height", _p$.t = _v$2);
+					_v$3 !== _p$.a && setAttribute(_el$2, "viewBox", _p$.a = _v$3);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$2;
+			})();
+		})(), null);
+		insert(_el$, () => props.renderChildren(getRootSize, () => getPaths()[0].outerPath, () => getPaths()[0].outerPoints), null);
+		insert(_el$, (() => {
+			var _c$2 = memo(() => !!getStrokeDefs());
+			return () => _c$2() && (() => {
+				var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild;
+				setAttribute(_el$5, "class", "_3tqh7l2 _3tqh7l1");
+				insert(_el$6, createComponent(For, {
+					get each() {
+						return getStrokeDefs();
+					},
+					children: (def) => [
+						memo(() => def.gradientOrPattern?.renderDefsElement()),
+						memo(() => def.filter?.renderDefsElement()),
+						memo(() => def.clipPath?.renderDefsElement())
+					]
+				}));
+				insert(_el$5, createComponent(For, {
+					get each() {
+						return getStrokeDefs();
+					},
+					children: (def, getIndex) => (() => {
+						var _el$7 = _tmpl$4();
+						effect((_p$) => {
+							var _v$11 = `${getPaths()[getIndex()].outerPath} ${getPaths()[getIndex()].innerPath}`, _v$12 = def.gradientOrPattern ? `url(#${def.gradientOrPattern?.id})` : def.color, _v$13 = def.opacity, _v$14 = def.filter ? `url(#${def.filter?.id})` : void 0, _v$15 = def.clipPath ? `url(#${def.clipPath?.id})` : void 0, _v$16 = def.blend ? { "mix-blend-mode": "screen" } : void 0;
+							_v$11 !== _p$.e && setAttribute(_el$7, "d", _p$.e = _v$11);
+							_v$12 !== _p$.t && setAttribute(_el$7, "fill", _p$.t = _v$12);
+							_v$13 !== _p$.a && setAttribute(_el$7, "fill-opacity", _p$.a = _v$13);
+							_v$14 !== _p$.o && setAttribute(_el$7, "filter", _p$.o = _v$14);
+							_v$15 !== _p$.i && setAttribute(_el$7, "clip-path", _p$.i = _v$15);
+							_p$.n = style(_el$7, _v$16, _p$.n);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0,
+							o: void 0,
+							i: void 0,
+							n: void 0
+						});
+						return _el$7;
+					})()
+				}), null);
+				effect((_p$) => {
+					var _v$0 = getRootSize().width, _v$1 = getRootSize().height, _v$10 = `0 0 ${getRootSize().width} ${getRootSize().height}`;
+					_v$0 !== _p$.e && setAttribute(_el$5, "width", _p$.e = _v$0);
+					_v$1 !== _p$.t && setAttribute(_el$5, "height", _p$.t = _v$1);
+					_v$10 !== _p$.a && setAttribute(_el$5, "viewBox", _p$.a = _v$10);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$5;
+			})();
+		})(), null);
+		return _el$;
+	})();
+};
+//#endregion
+export { Shape };
+
+//# sourceMappingURL=Shape.js.map

package/dist/Exotics/Shape/Shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shape.js","names":["For","createMemo","createSignal","onCleanup","onMount","ObjectUtils","ShapeUtils","Size2d","access","ShapeProps","ShapeStrokeGeom","styles","DEFAULT_STROKE_GEOM","thicknesses","Shape","props","getRootRef","setRootRef","HTMLElement","getRootSize","setRootSize","width","height","getFillDefs","computeFillDefs","getStrokeDefs","computeStrokeDefs","getPaths","pts","computePoints","cache","Record","ReturnType","strokeDefs","strokeGeom","length","joinRadii","lameExponents","pairs","zipArray","map","geom","offset","key","t","Math","floor","join","paths","rootResizeObserver","ResizeObserver","disconnect","rootRef","offsetWidth","offsetHeight","observe","_el$","_tmpl$","_$use","_$className","shapeRoot","_$insert","_c$","_$memo","_el$2","_tmpl$2","_el$3","firstChild","_$setAttribute","shapeFillSVG","_$createComponent","each","children","def","gradientOrPattern","renderDefsElement","filter","clipPath","_el$4","_tmpl$3","_$effect","_p$","_v$4","outerPath","_v$5","id","color","_v$6","opacity","_v$7","undefined","_v$8","_v$9","blend","e","a","o","i","n","_$style","_v$","_v$2","_v$3","renderChildren","outerPoints","_c$2","_el$5","_el$6","shapeStrokeSVG","getIndex","_el$7","_tmpl$4","_v$11","innerPath","_v$12","_v$13","_v$14","_v$15","_v$16","_v$0","_v$1","_v$10"],"sources":["../../../src/Exotics/Shape/Shape.tsx"],"sourcesContent":["import { For, createMemo, createSignal, onCleanup, onMount } from \"solid-js\";\n\nimport { ObjectUtils, ShapeUtils, type Size2d } from \"@thewaver/ss-utils\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport type { ShapeProps, ShapeStrokeGeom } from \"./Shape.types\";\n\nimport * as styles from \"./Shape.css\";\n\nconst DEFAULT_STROKE_GEOM: ShapeStrokeGeom = { thicknesses: [0] };\n\nexport const Shape = (props: ShapeProps) => {\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\n    const [getRootSize, setRootSize] = createSignal<Size2d>({ width: 0, height: 0 });\n\n    const getFillDefs = createMemo(() => {\n        return props.computeFillDefs?.(getRootSize);\n    });\n\n    const getStrokeDefs = createMemo(() => {\n        return props.computeStrokeDefs?.(getRootSize);\n    });\n\n    const getPaths = createMemo(() => {\n        const pts = props.computePoints(getRootSize());\n        const cache: Record<string, ReturnType<typeof ShapeUtils.getPaths>> = {};\n        const strokeDefs = getStrokeDefs();\n        const strokeGeom = access(props.strokeGeom) ?? [];\n\n        if (!strokeDefs?.length) {\n            return [ShapeUtils.getPaths(pts, [0], access(props.joinRadii), access(props.lameExponents))];\n        }\n\n        const pairs = ObjectUtils.zipArray(\n            \"stretch\",\n            strokeDefs,\n            strokeGeom.length ? strokeGeom : [DEFAULT_STROKE_GEOM],\n        );\n\n        return pairs.map(([, geom]) => {\n            const { thicknesses, offset } = geom;\n            const key = `${thicknesses.map((t) => Math.floor(t)).join(\"_\")}_${offset ?? \"\"}`;\n\n            if (cache[key]) return cache[key];\n\n            const paths = ShapeUtils.getPaths(\n                pts,\n                thicknesses,\n                access(props.joinRadii),\n                access(props.lameExponents),\n                offset,\n            );\n            cache[key] = paths;\n\n            return paths;\n        });\n    });\n\n    onMount(() => {\n        let rootResizeObserver: ResizeObserver | undefined;\n\n        onCleanup(() => {\n            rootResizeObserver?.disconnect();\n        });\n\n        const rootRef = getRootRef();\n\n        if (!rootRef) return;\n\n        rootResizeObserver = new ResizeObserver(() => {\n            setRootSize({ width: rootRef.offsetWidth, height: rootRef.offsetHeight });\n        });\n        rootResizeObserver.observe(rootRef);\n    });\n\n    return (\n        <div ref={setRootRef} class={styles.shapeRoot}>\n            {getFillDefs() && (\n                <svg\n                    class={styles.shapeFillSVG}\n                    width={getRootSize().width}\n                    height={getRootSize().height}\n                    viewBox={`0 0 ${getRootSize().width} ${getRootSize().height}`}\n                    overflow=\"visible\"\n                >\n                    <defs>\n                        <For each={getFillDefs()}>\n                            {(def) => (\n                                <>\n                                    {def.gradientOrPattern?.renderDefsElement()}\n                                    {def.filter?.renderDefsElement()}\n                                    {def.clipPath?.renderDefsElement()}\n                                </>\n                            )}\n                        </For>\n                    </defs>\n\n                    <For each={getFillDefs()}>\n                        {(def) => (\n                            <path\n                                d={getPaths()[0].outerPath}\n                                fill={def.gradientOrPattern ? `url(#${def.gradientOrPattern?.id})` : def.color}\n                                fill-opacity={def.opacity}\n                                filter={def.filter ? `url(#${def.filter?.id})` : undefined}\n                                clip-path={def.clipPath ? `url(#${def.clipPath?.id})` : undefined}\n                                style={def.blend ? { \"mix-blend-mode\": \"screen\" } : undefined}\n                            />\n                        )}\n                    </For>\n                </svg>\n            )}\n\n            {props.renderChildren(\n                getRootSize,\n                () => getPaths()[0].outerPath,\n                () => getPaths()[0].outerPoints,\n            )}\n\n            {getStrokeDefs() && (\n                <svg\n                    class={styles.shapeStrokeSVG}\n                    width={getRootSize().width}\n                    height={getRootSize().height}\n                    viewBox={`0 0 ${getRootSize().width} ${getRootSize().height}`}\n                    overflow=\"visible\"\n                >\n                    <defs>\n                        <For each={getStrokeDefs()}>\n                            {(def) => (\n                                <>\n                                    {def.gradientOrPattern?.renderDefsElement()}\n                                    {def.filter?.renderDefsElement()}\n                                    {def.clipPath?.renderDefsElement()}\n                                </>\n                            )}\n                        </For>\n                    </defs>\n\n                    <For each={getStrokeDefs()}>\n                        {(def, getIndex) => (\n                            <path\n                                d={`${getPaths()[getIndex()].outerPath} ${getPaths()[getIndex()].innerPath}`}\n                                fill-rule=\"evenodd\"\n                                fill={def.gradientOrPattern ? `url(#${def.gradientOrPattern?.id})` : def.color}\n                                fill-opacity={def.opacity}\n                                filter={def.filter ? `url(#${def.filter?.id})` : undefined}\n                                clip-path={def.clipPath ? `url(#${def.clipPath?.id})` : undefined}\n                                style={def.blend ? { \"mix-blend-mode\": \"screen\" } : undefined}\n                            />\n                        )}\n                    </For>\n                </svg>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Exotics/SortableGrid/SortableGrid.css.js

@@ -0,0 +1,14 @@
+/* empty css                                */
+//#region src/Exotics/SortableGrid/SortableGrid.css.ts
+var sortableGridRoot = "_1umvdlb0";
+var sortableGridCells = "_1umvdlb1";
+var sortableGridCell = "_1umvdlb2";
+var sortableGridSlot = "_1umvdlb3";
+var sortableGridItem = "_1umvdlb4";
+var sortableGridHit = "_1umvdlb5";
+var sortableGridLanding = "_1umvdlb6";
+var sortableGridCarried = "_1umvdlb7";
+//#endregion
+export { sortableGridCarried, sortableGridCell, sortableGridCells, sortableGridHit, sortableGridItem, sortableGridLanding, sortableGridRoot, sortableGridSlot };
+
+//# sourceMappingURL=SortableGrid.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableGrid.css.js","names":[],"sources":["../../../src/Exotics/SortableGrid/SortableGrid.css.ts"],"sourcesContent":["import { globalStyle, style } from \"@vanilla-extract/css\";\n\nexport const sortableGridRoot = style({\n    display: \"block\",\n    position: \"relative\",\n    pointerEvents: \"all\",\n});\n\nexport const sortableGridCells = style({\n    display: \"grid\",\n    position: \"absolute\",\n    pointerEvents: \"none\",\n});\n\nexport const sortableGridCell = style({\n    display: \"flex\",\n    position: \"relative\",\n});\n\nexport const sortableGridSlot = style({\n    display: \"flex\",\n    position: \"absolute\",\n    pointerEvents: \"none\",\n});\n\nglobalStyle(`${sortableGridSlot} > *`, {\n    width: \"100%\",\n    height: \"100%\",\n});\n\nexport const sortableGridItem = style({\n    display: \"flex\",\n    flex: \"1 1 auto\",\n    minWidth: 0,\n    position: \"relative\",\n    touchAction: \"none\",\n    pointerEvents: \"none\",\n});\n\nexport const sortableGridHit = style({\n    position: \"absolute\",\n    touchAction: \"none\",\n    pointerEvents: \"all\",\n});\n\nexport const sortableGridLanding = style({\n    display: \"flex\",\n    position: \"absolute\",\n    pointerEvents: \"none\",\n});\n\nexport const sortableGridCarried = style({\n    display: \"flex\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    pointerEvents: \"none\",\n    willChange: \"transform\",\n});\n"],"mappings":""}