@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Exotics/Trail/Trail.js

@@ -0,0 +1,129 @@
+import { access } from "../../Utils/propUtils.js";
+import { InteractionTracker } from "../../Abstracts/InteractionTracker/InteractionTracker.js";
+import { SignalMirror } from "../../Abstracts/SignalMirror/SignalMirror.js";
+import { TrailUtils } from "./Trail.utils.js";
+import { trailPath, trailRoot, trailTrack, trailTraveller } from "./Trail.css.js";
+import { createEffect, createMemo, createSignal, onCleanup, onMount, untrack } from "solid-js";
+import { MathUtils } from "@thewaver/ss-utils";
+import { className, effect, insert, setAttribute, setStyleProperty, template, use } from "solid-js/web";
+//#region src/Exotics/Trail/Trail.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><svg aria-hidden=true><path></path></svg><div>`);
+var DEFAULT_TRAIL_DURATION_MS = 4e3;
+var NO_LENGTH = 0;
+var NO_PROGRESS = 0;
+var NO_ANGLE = 0;
+var ORIGIN = {
+	x: 0,
+	y: 0
+};
+var SAMPLE_STEP_PX = 1;
+var Trail = (props) => {
+	const [getProgress, setProgress] = SignalMirror.createOptional(() => props.progressSignal, NO_PROGRESS);
+	const [getIsPlaying, setIsPlaying] = SignalMirror.createOptional(() => props.isPlayingSignal, true);
+	const [getPathRef, setPathRef] = createSignal();
+	const [getPathLength, setPathLength] = createSignal(NO_LENGTH);
+	const getIsPageHidden = InteractionTracker.trackPageHidden();
+	const getPath = createMemo(() => access(props.path));
+	const getSize = createMemo(() => access(props.size));
+	const getDurationMs = createMemo(() => access(props.durationMs) ?? DEFAULT_TRAIL_DURATION_MS);
+	const getIsLooping = createMemo(() => access(props.isLooping) ?? false);
+	const getIsTurning = createMemo(() => access(props.isTurning) ?? false);
+	const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);
+	const getIsRunning = createMemo(() => getIsPlaying() && !getIsDisabled() && !getIsPageHidden() && getPathLength() > NO_LENGTH);
+	const getPlace = createMemo(() => {
+		const path = getPathRef();
+		const length = getPathLength();
+		const progress = MathUtils.clamp01(getProgress());
+		if (!path || length <= NO_LENGTH) return {
+			progress,
+			point: ORIGIN,
+			angle: NO_ANGLE
+		};
+		const at = length * progress;
+		const span = TrailUtils.getSampleSpan(length, at, SAMPLE_STEP_PX);
+		const point = path.getPointAtLength(at);
+		const behind = path.getPointAtLength(span.from);
+		const ahead = path.getPointAtLength(span.to);
+		return {
+			progress,
+			point: {
+				x: point.x,
+				y: point.y
+			},
+			angle: TrailUtils.getAngle(behind, ahead)
+		};
+	});
+	const controller = {
+		getPlace,
+		getIsPlaying,
+		play: () => setIsPlaying(true),
+		pause: () => setIsPlaying(false),
+		seek: (progress) => setProgress(MathUtils.clamp01(progress))
+	};
+	createEffect(() => {
+		const path = getPathRef();
+		getPath();
+		setPathLength(path ? path.getTotalLength() : NO_LENGTH);
+	});
+	createEffect(() => {
+		if (!getIsRunning()) return;
+		let frameId;
+		let lastMs = performance.now();
+		const advance = () => {
+			const nowMs = performance.now();
+			const step = TrailUtils.getSteppedProgress(untrack(getProgress), nowMs - lastMs, getDurationMs(), getIsLooping());
+			lastMs = nowMs;
+			setProgress(step.progress);
+			if (step.hasLapped) {
+				props.onLap?.();
+				if (!getIsLooping()) {
+					setIsPlaying(false);
+					return;
+				}
+			}
+			frameId = requestAnimationFrame(advance);
+		};
+		frameId = requestAnimationFrame(advance);
+		onCleanup(() => {
+			if (frameId !== void 0) cancelAnimationFrame(frameId);
+		});
+	});
+	onMount(() => {
+		props.onMount?.(controller);
+	});
+	const getTravellerTransform = () => {
+		const place = getPlace();
+		const turn = getIsTurning() ? ` rotate(${place.angle}deg)` : "";
+		return `translate(${place.point.x}px, ${place.point.y}px) translate(-50%, -50%)${turn}`;
+	};
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+		className(_el$, trailRoot);
+		setAttribute(_el$2, "class", trailTrack);
+		use(setPathRef, _el$3);
+		setAttribute(_el$3, "class", trailPath);
+		insert(_el$2, () => props.renderTrack?.(getPath), null);
+		className(_el$4, trailTraveller);
+		insert(_el$4, () => props.renderTraveller(getPlace));
+		effect((_p$) => {
+			var _v$ = `${getSize().width}px`, _v$2 = `${getSize().height}px`, _v$3 = `0 0 ${getSize().width} ${getSize().height}`, _v$4 = getPath(), _v$5 = getTravellerTransform();
+			_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, "d", _p$.o = _v$4);
+			_v$5 !== _p$.i && setStyleProperty(_el$4, "transform", _p$.i = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$;
+	})();
+};
+//#endregion
+export { Trail };
+
+//# sourceMappingURL=Trail.js.map

package/dist/Exotics/Trail/Trail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trail.js","names":["createEffect","createMemo","createSignal","onCleanup","onMount","untrack","MathUtils","Point2d","InteractionTracker","SignalMirror","access","TrailController","TrailPlace","TrailProps","TrailUtils","styles","DEFAULT_TRAIL_DURATION_MS","NO_LENGTH","NO_PROGRESS","NO_ANGLE","ORIGIN","x","y","SAMPLE_STEP_PX","Trail","props","getProgress","setProgress","createOptional","progressSignal","getIsPlaying","setIsPlaying","isPlayingSignal","getPathRef","setPathRef","SVGPathElement","getPathLength","setPathLength","getIsPageHidden","trackPageHidden","getPath","path","getSize","size","getDurationMs","durationMs","getIsLooping","isLooping","getIsTurning","isTurning","getIsDisabled","isDisabled","getIsRunning","getPlace","length","progress","clamp01","point","angle","at","span","getSampleSpan","getPointAtLength","behind","from","ahead","to","getAngle","controller","play","pause","seek","getTotalLength","frameId","lastMs","performance","now","advance","nowMs","step","getSteppedProgress","hasLapped","onLap","requestAnimationFrame","undefined","cancelAnimationFrame","getTravellerTransform","place","turn","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_$className","trailRoot","_$setAttribute","trailTrack","_$use","trailPath","_$insert","renderTrack","trailTraveller","renderTraveller","_$effect","_p$","_v$","width","_v$2","height","_v$3","_v$4","_v$5","e","_$setStyleProperty","t","a","o","i"],"sources":["../../../src/Exotics/Trail/Trail.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, onCleanup, onMount, untrack } from \"solid-js\";\n\nimport { MathUtils, type Point2d } from \"@thewaver/ss-utils\";\n\nimport { InteractionTracker } from \"../../Abstracts/InteractionTracker/InteractionTracker\";\nimport { SignalMirror } from \"../../Abstracts/SignalMirror/SignalMirror\";\nimport { access } from \"../../Utils/propUtils\";\nimport type { TrailController, TrailPlace, TrailProps } from \"./Trail.types\";\nimport { TrailUtils } from \"./Trail.utils\";\n\nimport * as styles from \"./Trail.css\";\n\nconst DEFAULT_TRAIL_DURATION_MS = 4000;\nconst NO_LENGTH = 0;\nconst NO_PROGRESS = 0;\nconst NO_ANGLE = 0;\nconst ORIGIN: Point2d = { x: 0, y: 0 };\nconst SAMPLE_STEP_PX = 1;\n\nexport const Trail = (props: TrailProps) => {\n    const [getProgress, setProgress] = SignalMirror.createOptional(() => props.progressSignal, NO_PROGRESS);\n    const [getIsPlaying, setIsPlaying] = SignalMirror.createOptional(() => props.isPlayingSignal, true);\n\n    const [getPathRef, setPathRef] = createSignal<SVGPathElement>();\n    const [getPathLength, setPathLength] = createSignal(NO_LENGTH);\n\n    const getIsPageHidden = InteractionTracker.trackPageHidden();\n\n    const getPath = createMemo(() => access(props.path));\n\n    const getSize = createMemo(() => access(props.size));\n\n    const getDurationMs = createMemo(() => access(props.durationMs) ?? DEFAULT_TRAIL_DURATION_MS);\n\n    const getIsLooping = createMemo(() => access(props.isLooping) ?? false);\n\n    const getIsTurning = createMemo(() => access(props.isTurning) ?? false);\n\n    const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);\n\n    const getIsRunning = createMemo(\n        () => getIsPlaying() && !getIsDisabled() && !getIsPageHidden() && getPathLength() > NO_LENGTH,\n    );\n\n    const getPlace = createMemo((): TrailPlace => {\n        const path = getPathRef();\n        const length = getPathLength();\n        const progress = MathUtils.clamp01(getProgress());\n\n        if (!path || length <= NO_LENGTH) return { progress, point: ORIGIN, angle: NO_ANGLE };\n\n        const at = length * progress;\n        const span = TrailUtils.getSampleSpan(length, at, SAMPLE_STEP_PX);\n        const point = path.getPointAtLength(at);\n        const behind = path.getPointAtLength(span.from);\n        const ahead = path.getPointAtLength(span.to);\n\n        return {\n            progress,\n            point: { x: point.x, y: point.y },\n            angle: TrailUtils.getAngle(behind, ahead),\n        };\n    });\n\n    const controller: TrailController = {\n        getPlace,\n        getIsPlaying,\n        play: () => setIsPlaying(true),\n        pause: () => setIsPlaying(false),\n        seek: (progress: number) => setProgress(MathUtils.clamp01(progress)),\n    };\n\n    createEffect(() => {\n        const path = getPathRef();\n\n        getPath();\n\n        setPathLength(path ? path.getTotalLength() : NO_LENGTH);\n    });\n\n    createEffect(() => {\n        if (!getIsRunning()) return;\n\n        let frameId: number | undefined;\n        let lastMs = performance.now();\n\n        const advance = () => {\n            const nowMs = performance.now();\n            const step = TrailUtils.getSteppedProgress(\n                untrack(getProgress),\n                nowMs - lastMs,\n                getDurationMs(),\n                getIsLooping(),\n            );\n\n            lastMs = nowMs;\n            setProgress(step.progress);\n\n            if (step.hasLapped) {\n                props.onLap?.();\n\n                if (!getIsLooping()) {\n                    setIsPlaying(false);\n\n                    return;\n                }\n            }\n\n            frameId = requestAnimationFrame(advance);\n        };\n\n        frameId = requestAnimationFrame(advance);\n\n        onCleanup(() => {\n            if (frameId !== undefined) cancelAnimationFrame(frameId);\n        });\n    });\n\n    onMount(() => {\n        props.onMount?.(controller);\n    });\n\n    const getTravellerTransform = () => {\n        const place = getPlace();\n        const turn = getIsTurning() ? ` rotate(${place.angle}deg)` : \"\";\n\n        return `translate(${place.point.x}px, ${place.point.y}px) translate(-50%, -50%)${turn}`;\n    };\n\n    return (\n        <div class={styles.trailRoot} style={{ width: `${getSize().width}px`, height: `${getSize().height}px` }}>\n            <svg class={styles.trailTrack} viewBox={`0 0 ${getSize().width} ${getSize().height}`} aria-hidden=\"true\">\n                <path ref={setPathRef} class={styles.trailPath} d={getPath()} />\n\n                {props.renderTrack?.(getPath)}\n            </svg>\n\n            <div class={styles.trailTraveller} style={{ transform: getTravellerTransform() }}>\n                {props.renderTraveller(getPlace)}\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Exotics/Trail/Trail.utils.js

@@ -0,0 +1,35 @@
+import { MathUtils, Point2dUtils } from "@thewaver/ss-utils";
+//#region src/Exotics/Trail/Trail.utils.ts
+var NOTHING = 0;
+var FULL_LAP = 1;
+var TrailUtils;
+(function(_TrailUtils) {
+	_TrailUtils.getSteppedProgress = (progress, elapsedMs, durationMs, isLooping) => {
+		if (durationMs <= 0) return {
+			progress: FULL_LAP,
+			hasLapped: true
+		};
+		const stepped = MathUtils.clamp01(progress) + Math.max(NOTHING, elapsedMs) / durationMs;
+		if (stepped < FULL_LAP) return {
+			progress: stepped,
+			hasLapped: false
+		};
+		if (!isLooping) return {
+			progress: FULL_LAP,
+			hasLapped: true
+		};
+		return {
+			progress: stepped % FULL_LAP,
+			hasLapped: true
+		};
+	};
+	_TrailUtils.getSampleSpan = (length, at, step) => ({
+		from: Math.max(NOTHING, at - step),
+		to: Math.min(length, at + step)
+	});
+	_TrailUtils.getAngle = (from, to) => Point2dUtils.radiansToDegrees(Math.atan2(to.y - from.y, to.x - from.x));
+})(TrailUtils || (TrailUtils = {}));
+//#endregion
+export { TrailUtils };
+
+//# sourceMappingURL=Trail.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Trail.utils.js","names":[],"sources":["../../../src/Exotics/Trail/Trail.utils.ts"],"sourcesContent":["import { MathUtils, type Point2d, Point2dUtils } from \"@thewaver/ss-utils\";\n\nimport type { TrailStep } from \"./Trail.types\";\n\nconst NOTHING = 0;\nconst FULL_LAP = 1;\n\nexport namespace TrailUtils {\n    export const getSteppedProgress = (\n        progress: number,\n        elapsedMs: number,\n        durationMs: number,\n        isLooping: boolean,\n    ): TrailStep => {\n        if (durationMs <= 0) return { progress: FULL_LAP, hasLapped: true };\n\n        const stepped = MathUtils.clamp01(progress) + Math.max(NOTHING, elapsedMs) / durationMs;\n\n        if (stepped < FULL_LAP) return { progress: stepped, hasLapped: false };\n        if (!isLooping) return { progress: FULL_LAP, hasLapped: true };\n\n        return { progress: stepped % FULL_LAP, hasLapped: true };\n    };\n\n    export const getSampleSpan = (length: number, at: number, step: number) => ({\n        from: Math.max(NOTHING, at - step),\n        to: Math.min(length, at + step),\n    });\n\n    export const getAngle = (from: Point2d, to: Point2d) =>\n        Point2dUtils.radiansToDegrees(Math.atan2(to.y - from.y, to.x - from.x));\n}\n"],"mappings":";;AAIA,IAAM,UAAU;AAChB,IAAM,WAAW;AAEV,IAAU;CAAV,SAAA,aAAA;CACU,YAAA,sBACT,UACA,WACA,YACA,cACY;EACZ,IAAI,cAAc,GAAG,OAAO;GAAE,UAAU;GAAU,WAAW;EAAK;EAElE,MAAM,UAAU,UAAU,QAAQ,QAAQ,IAAI,KAAK,IAAI,SAAS,SAAS,IAAI;EAE7E,IAAI,UAAU,UAAU,OAAO;GAAE,UAAU;GAAS,WAAW;EAAM;EACrE,IAAI,CAAC,WAAW,OAAO;GAAE,UAAU;GAAU,WAAW;EAAK;EAE7D,OAAO;GAAE,UAAU,UAAU;GAAU,WAAW;EAAK;CAC3D;CAEa,YAAA,iBAAiB,QAAgB,IAAY,UAAkB;EACxE,MAAM,KAAK,IAAI,SAAS,KAAK,IAAI;EACjC,IAAI,KAAK,IAAI,QAAQ,KAAK,IAAI;CAClC;CAEa,YAAA,YAAY,MAAe,OACpC,aAAa,iBAAiB,KAAK,MAAM,GAAG,IAAI,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC,CAAC;AAC7E,EAAA,CAAA,eAAA,aAAA,CAAA,EAAD"}

package/dist/Exotics/Typewriter/Typewriter.css.js

@@ -0,0 +1,12 @@
+/* empty css                              */
+//#region src/Exotics/Typewriter/Typewriter.css.ts
+var typewriterFade = "ubrza00";
+var typewriterRoot = "ubrza01";
+var typewriterChildrenWrap = "ubrza02";
+var typewriterTextWrap = "ubrza03";
+var typewriterChar = "ubrza04";
+var typewriterBlockLikeAtomic = "ubrza05";
+//#endregion
+export { typewriterBlockLikeAtomic, typewriterChar, typewriterChildrenWrap, typewriterFade, typewriterRoot, typewriterTextWrap };
+
+//# sourceMappingURL=Typewriter.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typewriter.css.js","names":[],"sources":["../../../src/Exotics/Typewriter/Typewriter.css.ts"],"sourcesContent":["import { keyframes, style } from \"@vanilla-extract/css\";\n\nexport const typewriterFade = keyframes({\n    \"0%\": {\n        opacity: 0,\n        transform: \"scale(3)\",\n    },\n    \"100%\": {\n        opacity: 1,\n        transform: \"scale(1)\",\n    },\n});\n\nexport const typewriterRoot = style({\n    position: \"relative\",\n});\n\nexport const typewriterChildrenWrap = style({\n    position: \"absolute\",\n    left: -999999,\n    top: -999999,\n    width: \"100%\",\n    visibility: \"hidden\",\n    pointerEvents: \"none\",\n    whiteSpace: \"pre\",\n});\n\nexport const typewriterTextWrap = style({});\n\nexport const typewriterChar = style({\n    display: \"inline-block\",\n    animationFillMode: \"both\",\n});\n\nexport const typewriterBlockLikeAtomic = style({\n    display: \"inline-block\",\n    width: \"100%\",\n    animationFillMode: \"both\",\n});\n"],"mappings":""}

package/dist/Exotics/Typewriter/Typewriter.js

@@ -0,0 +1,188 @@
+import { access } from "../../Utils/propUtils.js";
+import { typewriterChildrenWrap, typewriterFade, typewriterRoot } from "./Typewriter.css.js";
+import { For, Index, createEffect, createMemo, createSignal, on, onCleanup, onMount } from "solid-js";
+import { JSXTextParser } from "@thewaver/ss-utils";
+import { className, createComponent, effect, insert, memo, mergeProps, setStyleProperty, spread, style, template, use } from "solid-js/web";
+//#region src/Exotics/Typewriter/Typewriter.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><div aria-hidden=true inert>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<br>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<a>`);
+var EMPTY_SEGMENTS = [];
+var DEFAULT_TYPEWRITER_ANIMATION_NAME = typewriterFade;
+var DEFAULT_TYPEWRITER_ANIMATION_DURATION_MS = 500;
+var DEFAULT_TYPEWRITER_ANIMATION_DELAY_MS = 10;
+var Typewriter = (props) => {
+	const [getContainerRef, setContainerRef] = createSignal();
+	const [getIndexedSegments, setIndexedSegments] = createSignal(EMPTY_SEGMENTS);
+	const [getAnimatedElementCount, setAnimatedElementCount] = createSignal(0);
+	const [getIsAnimating, setIsAnimating] = createSignal(false);
+	const [getHasAnimatedOnce, setHasAnimatedOnce] = createSignal(false);
+	let animationToggleTimeout;
+	onCleanup(() => {
+		clearTimeout(animationToggleTimeout);
+	});
+	const getAnimationName = createMemo(() => access(props.animationName) ?? DEFAULT_TYPEWRITER_ANIMATION_NAME);
+	const getAnimationDurationMs = createMemo(() => access(props.animationDurationMs) ?? DEFAULT_TYPEWRITER_ANIMATION_DURATION_MS);
+	const getAnimationDelayMs = createMemo(() => access(props.animationDelayMs) ?? DEFAULT_TYPEWRITER_ANIMATION_DELAY_MS);
+	const getAnimationBase = createMemo(() => getIsAnimating() ? {
+		name: getAnimationName(),
+		durationMs: getAnimationDurationMs(),
+		delayMs: getAnimationDelayMs(),
+		initialDelayMs: access(props.initialAnimationDelayMs) ?? 0
+	} : void 0);
+	const clearAnimation = () => {
+		setIsAnimating(false);
+		clearTimeout(animationToggleTimeout);
+	};
+	const restartAnimation = (cause = "other") => {
+		clearAnimation();
+		const timeoutDuration = getAnimatedElementCount() * getAnimationDelayMs() + (access(props.initialAnimationDelayMs) ?? 0) + getAnimationDurationMs();
+		if (getHasAnimatedOnce() && (cause === "content" && access(props.resetAnimationOnContent) === false || cause === "layout" && access(props.resetAnimationOnLayout) === false)) return;
+		setIsAnimating(true);
+		setHasAnimatedOnce(true);
+		animationToggleTimeout = setTimeout(() => {
+			setIsAnimating(false);
+			props.onAnimationEnd?.();
+		}, timeoutDuration);
+	};
+	const update = (cause) => {
+		const containerRef = getContainerRef();
+		if (!containerRef) return;
+		clearAnimation();
+		setIndexedSegments(EMPTY_SEGMENTS);
+		setAnimatedElementCount(0);
+		let itemCount = 0;
+		const width = containerRef.clientWidth;
+		const segments = JSXTextParser.getSegmentTokens(containerRef);
+		const indexedSegments = JSXTextParser.getInlinedSegments(segments, width).map((segment) => {
+			const result = {
+				...segment,
+				startIndex: itemCount
+			};
+			itemCount += segment.type === "text" ? Array.from(segment.text).length : 1;
+			return result;
+		});
+		setIndexedSegments(indexedSegments);
+		setAnimatedElementCount(itemCount);
+		restartAnimation(cause);
+	};
+	const controller = createMemo(() => ({
+		restartAnimation: () => {
+			if (!getIsAnimating()) {
+				restartAnimation();
+				return true;
+			}
+			return false;
+		},
+		update
+	}));
+	createEffect(on(getAnimationName, () => restartAnimation(), { defer: true }));
+	onMount(() => {
+		props.onMount?.(controller());
+		let childrenContainerObserver;
+		onCleanup(() => {
+			childrenContainerObserver?.disconnect();
+		});
+		const containerRef = getContainerRef();
+		if (!containerRef) return;
+		childrenContainerObserver = new ResizeObserver(() => update("layout"));
+		childrenContainerObserver.observe(containerRef);
+	});
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		className(_el$, typewriterRoot);
+		use(setContainerRef, _el$2);
+		className(_el$2, typewriterChildrenWrap);
+		insert(_el$2, () => props.children);
+		insert(_el$, (() => {
+			var _c$ = memo(() => !!!!getIndexedSegments().length);
+			return () => _c$() && (() => {
+				var _el$3 = _tmpl$2();
+				className(_el$3, "ubrza03");
+				insert(_el$3, createComponent(For, {
+					get each() {
+						return getIndexedSegments();
+					},
+					children: (segment) => {
+						const getAnimationStyle = (startIndex) => {
+							const base = getAnimationBase();
+							if (!base) return void 0;
+							return {
+								"animation-name": base.name,
+								"animation-duration": `${base.durationMs}ms`,
+								"animation-delay": `${startIndex * base.delayMs + base.initialDelayMs}ms`
+							};
+						};
+						switch (segment.type) {
+							case "atomic": return (() => {
+								var _el$4 = _tmpl$3();
+								insert(_el$4, () => segment.element);
+								effect((_p$) => {
+									var _v$ = segment.isBlockLike ? "ubrza05" : "ubrza04", _v$2 = getAnimationStyle(segment.startIndex);
+									_v$ !== _p$.e && className(_el$4, _p$.e = _v$);
+									_p$.t = style(_el$4, _v$2, _p$.t);
+									return _p$;
+								}, {
+									e: void 0,
+									t: void 0
+								});
+								return _el$4;
+							})();
+							case "linebreak": return (() => {
+								var _el$5 = _tmpl$4();
+								effect((_$p) => style(_el$5, getAnimationStyle(segment.startIndex), _$p));
+								return _el$5;
+							})();
+							case "text": {
+								const style$1 = {
+									...segment.nonMetrics,
+									...segment.metrics
+								};
+								return memo(() => memo(() => !!getIsAnimating())() ? (() => {
+									var _el$6 = _tmpl$3();
+									insert(_el$6, createComponent(Index, {
+										get each() {
+											return Array.from(segment.text);
+										},
+										children: (getChar, charIndex) => (() => {
+											var _el$7 = _tmpl$3();
+											className(_el$7, "ubrza04");
+											insert(_el$7, getChar);
+											effect((_$p) => style(_el$7, getAnimationStyle(segment.startIndex + charIndex), _$p));
+											return _el$7;
+										})()
+									}));
+									effect((_$p) => style(_el$6, style$1, _$p));
+									return _el$6;
+								})() : memo(() => !!segment.meta?.anchor)() ? (() => {
+									var _el$8 = _tmpl$5();
+									className(_el$8, "ubrza04");
+									spread(_el$8, mergeProps(() => segment.meta?.common, () => segment.meta?.anchor), false, true);
+									insert(_el$8, () => segment.text);
+									effect((_$p) => style(_el$8, style$1, _$p));
+									return _el$8;
+								})() : (() => {
+									var _el$9 = _tmpl$3();
+									className(_el$9, "ubrza04");
+									spread(_el$9, mergeProps(() => segment.meta?.common), false, true);
+									insert(_el$9, () => segment.text);
+									effect((_$p) => style(_el$9, style$1, _$p));
+									return _el$9;
+								})());
+							}
+						}
+					}
+				}));
+				effect((_$p) => setStyleProperty(_el$3, "width", `${getContainerRef()?.clientWidth ?? 0}px`));
+				return _el$3;
+			})();
+		})(), null);
+		return _el$;
+	})();
+};
+//#endregion
+export { Typewriter };
+
+//# sourceMappingURL=Typewriter.js.map

package/dist/Exotics/Typewriter/Typewriter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typewriter.js","names":["For","Index","createEffect","createMemo","createSignal","on","onCleanup","onMount","ParentProps","ElementSegment","JSXTextParser","access","TypewriterProps","TypewriterUpdateCause","styles","EMPTY_SEGMENTS","startIndex","DEFAULT_TYPEWRITER_ANIMATION_NAME","typewriterFade","DEFAULT_TYPEWRITER_ANIMATION_DURATION_MS","DEFAULT_TYPEWRITER_ANIMATION_DELAY_MS","Typewriter","props","getContainerRef","setContainerRef","HTMLElement","getIndexedSegments","setIndexedSegments","getAnimatedElementCount","setAnimatedElementCount","getIsAnimating","setIsAnimating","getHasAnimatedOnce","setHasAnimatedOnce","animationToggleTimeout","ReturnType","setTimeout","clearTimeout","getAnimationName","animationName","getAnimationDurationMs","animationDurationMs","getAnimationDelayMs","animationDelayMs","getAnimationBase","name","durationMs","delayMs","initialDelayMs","initialAnimationDelayMs","undefined","clearAnimation","restartAnimation","cause","timeoutDuration","resetAnimationOnContent","resetAnimationOnLayout","onAnimationEnd","update","containerRef","itemCount","width","clientWidth","segments","getSegmentTokens","inlinedSegments","getInlinedSegments","indexedSegments","map","segment","result","type","Array","from","text","length","controller","defer","childrenContainerObserver","ResizeObserver","disconnect","observe","_el$","_tmpl$","_el$2","firstChild","_$className","typewriterRoot","_$use","typewriterChildrenWrap","_$insert","children","_c$","_$memo","_el$3","_tmpl$2","typewriterTextWrap","_$createComponent","each","getAnimationStyle","base","_el$4","_tmpl$3","element","_$effect","_p$","_v$","isBlockLike","typewriterBlockLikeAtomic","typewriterChar","_v$2","e","t","_$style","_el$5","_tmpl$4","_$p","style","nonMetrics","metrics","_el$6","getChar","charIndex","_el$7","meta","anchor","_el$8","_tmpl$5","_$spread","_$mergeProps","common","_el$9","_$setStyleProperty"],"sources":["../../../src/Exotics/Typewriter/Typewriter.tsx"],"sourcesContent":["import { For, Index, createEffect, createMemo, createSignal, on, onCleanup, onMount } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\n\nimport { type ElementSegment, JSXTextParser } from \"@thewaver/ss-utils\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport type { TypewriterProps, TypewriterUpdateCause } from \"./Typewriter.types\";\n\nimport * as styles from \"./Typewriter.css\";\n\nconst EMPTY_SEGMENTS: (ElementSegment & { startIndex: number })[] = [];\nconst DEFAULT_TYPEWRITER_ANIMATION_NAME = styles.typewriterFade;\nconst DEFAULT_TYPEWRITER_ANIMATION_DURATION_MS = 500;\nconst DEFAULT_TYPEWRITER_ANIMATION_DELAY_MS = 10;\n\nexport const Typewriter = (props: ParentProps<TypewriterProps>) => {\n    const [getContainerRef, setContainerRef] = createSignal<HTMLElement>();\n    const [getIndexedSegments, setIndexedSegments] =\n        createSignal<(ElementSegment & { startIndex: number })[]>(EMPTY_SEGMENTS);\n    const [getAnimatedElementCount, setAnimatedElementCount] = createSignal(0);\n    const [getIsAnimating, setIsAnimating] = createSignal(false);\n    const [getHasAnimatedOnce, setHasAnimatedOnce] = createSignal(false);\n\n    let animationToggleTimeout: ReturnType<typeof setTimeout> | undefined;\n\n    onCleanup(() => {\n        clearTimeout(animationToggleTimeout);\n    });\n\n    const getAnimationName = createMemo(() => access(props.animationName) ?? DEFAULT_TYPEWRITER_ANIMATION_NAME);\n\n    const getAnimationDurationMs = createMemo(\n        () => access(props.animationDurationMs) ?? DEFAULT_TYPEWRITER_ANIMATION_DURATION_MS,\n    );\n\n    const getAnimationDelayMs = createMemo(\n        () => access(props.animationDelayMs) ?? DEFAULT_TYPEWRITER_ANIMATION_DELAY_MS,\n    );\n\n    const getAnimationBase = createMemo(() =>\n        getIsAnimating()\n            ? {\n                  name: getAnimationName(),\n                  durationMs: getAnimationDurationMs(),\n                  delayMs: getAnimationDelayMs(),\n                  initialDelayMs: access(props.initialAnimationDelayMs) ?? 0,\n              }\n            : undefined,\n    );\n\n    const clearAnimation = () => {\n        setIsAnimating(false);\n        clearTimeout(animationToggleTimeout);\n    };\n\n    const restartAnimation = (cause: TypewriterUpdateCause = \"other\") => {\n        clearAnimation();\n\n        const timeoutDuration =\n            getAnimatedElementCount() * getAnimationDelayMs() +\n            (access(props.initialAnimationDelayMs) ?? 0) +\n            getAnimationDurationMs();\n\n        if (\n            getHasAnimatedOnce() &&\n            ((cause === \"content\" && access(props.resetAnimationOnContent) === false) ||\n                (cause === \"layout\" && access(props.resetAnimationOnLayout) === false))\n        )\n            return;\n\n        setIsAnimating(true);\n        setHasAnimatedOnce(true);\n\n        animationToggleTimeout = setTimeout(() => {\n            setIsAnimating(false);\n\n            props.onAnimationEnd?.();\n        }, timeoutDuration);\n    };\n\n    const update = (cause: TypewriterUpdateCause) => {\n        const containerRef = getContainerRef();\n\n        if (!containerRef) return;\n\n        clearAnimation();\n        setIndexedSegments(EMPTY_SEGMENTS);\n        setAnimatedElementCount(0);\n\n        let itemCount = 0;\n\n        const width = containerRef.clientWidth;\n        const segments = JSXTextParser.getSegmentTokens(containerRef);\n        const inlinedSegments = JSXTextParser.getInlinedSegments(segments, width);\n        const indexedSegments = inlinedSegments.map((segment) => {\n            const result = { ...segment, startIndex: itemCount };\n\n            itemCount += segment.type === \"text\" ? Array.from(segment.text).length : 1;\n\n            return result;\n        });\n\n        setIndexedSegments(indexedSegments);\n        setAnimatedElementCount(itemCount);\n        restartAnimation(cause);\n    };\n\n    const controller = createMemo(() => ({\n        restartAnimation: () => {\n            if (!getIsAnimating()) {\n                restartAnimation();\n\n                return true;\n            }\n\n            return false;\n        },\n        update,\n    }));\n\n    createEffect(on(getAnimationName, () => restartAnimation(), { defer: true }));\n\n    onMount(() => {\n        props.onMount?.(controller());\n\n        let childrenContainerObserver: ResizeObserver | undefined;\n\n        onCleanup(() => {\n            childrenContainerObserver?.disconnect();\n        });\n\n        const containerRef = getContainerRef();\n\n        if (!containerRef) return;\n\n        childrenContainerObserver = new ResizeObserver(() => update(\"layout\"));\n        childrenContainerObserver.observe(containerRef);\n    });\n\n    return (\n        <div class={styles.typewriterRoot}>\n            <div ref={setContainerRef} class={styles.typewriterChildrenWrap} aria-hidden=\"true\" inert>\n                {props.children}\n            </div>\n\n            {!!getIndexedSegments().length && (\n                <div class={styles.typewriterTextWrap} style={{ width: `${getContainerRef()?.clientWidth ?? 0}px` }}>\n                    <For each={getIndexedSegments()}>\n                        {(segment) => {\n                            const getAnimationStyle = (startIndex: number) => {\n                                const base = getAnimationBase();\n\n                                if (!base) return undefined;\n\n                                return {\n                                    \"animation-name\": base.name,\n                                    \"animation-duration\": `${base.durationMs}ms`,\n                                    \"animation-delay\": `${startIndex * base.delayMs + base.initialDelayMs}ms`,\n                                };\n                            };\n\n                            switch (segment.type) {\n                                case \"atomic\": {\n                                    return (\n                                        <span\n                                            class={\n                                                segment.isBlockLike\n                                                    ? styles.typewriterBlockLikeAtomic\n                                                    : styles.typewriterChar\n                                            }\n                                            style={getAnimationStyle(segment.startIndex)}\n                                        >\n                                            {segment.element}\n                                        </span>\n                                    );\n                                }\n                                case \"linebreak\":\n                                    return <br style={getAnimationStyle(segment.startIndex)} />;\n                                case \"text\": {\n                                    const style = { ...segment.nonMetrics, ...segment.metrics };\n\n                                    return (\n                                        <>\n                                            {getIsAnimating() ? (\n                                                <span style={style}>\n                                                    <Index each={Array.from(segment.text)}>\n                                                        {(getChar, charIndex) => (\n                                                            <span\n                                                                class={styles.typewriterChar}\n                                                                style={getAnimationStyle(\n                                                                    segment.startIndex + charIndex,\n                                                                )}\n                                                            >\n                                                                {getChar()}\n                                                            </span>\n                                                        )}\n                                                    </Index>\n                                                </span>\n                                            ) : segment.meta?.anchor ? (\n                                                <a\n                                                    class={styles.typewriterChar}\n                                                    style={style}\n                                                    {...segment.meta?.common}\n                                                    {...segment.meta?.anchor}\n                                                >\n                                                    {segment.text}\n                                                </a>\n                                            ) : (\n                                                <span\n                                                    class={styles.typewriterChar}\n                                                    style={style}\n                                                    {...segment.meta?.common}\n                                                >\n                                                    {segment.text}\n                                                </span>\n                                            )}\n                                        </>\n                                    );\n                                }\n                            }\n                        }}\n                    </For>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Exotics/Viewport/Viewport.context.js

@@ -0,0 +1,41 @@
+import { createContext, createRoot, createSignal, onCleanup, onMount, useContext } from "solid-js";
+//#region src/Exotics/Viewport/Viewport.context.ts
+var ViewportContext = createContext();
+var ViewportContextProvider = ViewportContext.Provider;
+var useParentViewportContext = () => useContext(ViewportContext);
+var getWindowRect = () => DOMRect.fromRect({
+	x: 0,
+	y: 0,
+	width: window.innerWidth,
+	height: window.innerHeight
+});
+var useViewportWithFallback = () => {
+	const [getViewportFallbackRect, setViewportFallbackRect] = createSignal(getWindowRect());
+	const handleWindowResize = () => {
+		setViewportFallbackRect(getWindowRect());
+	};
+	onMount(() => {
+		onCleanup(() => {
+			window.removeEventListener("resize", handleWindowResize);
+		});
+		window.addEventListener("resize", handleWindowResize);
+	});
+	return {
+		getPortalRef: () => void 0,
+		getSize: () => ({
+			width: getViewportFallbackRect().width,
+			height: getViewportFallbackRect().height
+		}),
+		getScale: () => 1,
+		getScaledRect: getViewportFallbackRect
+	};
+};
+var fallbackContext;
+var getFallbackContext = () => fallbackContext ??= createRoot(() => useViewportWithFallback());
+var useViewportContext = () => {
+	return useContext(ViewportContext) ?? getFallbackContext();
+};
+//#endregion
+export { ViewportContextProvider, useParentViewportContext, useViewportContext };
+
+//# sourceMappingURL=Viewport.context.js.map

package/dist/Exotics/Viewport/Viewport.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewport.context.js","names":[],"sources":["../../../src/Exotics/Viewport/Viewport.context.ts"],"sourcesContent":["import { createContext, createRoot, createSignal, onCleanup, onMount, useContext } from \"solid-js\";\n\nimport type { ViewportContextType } from \"./Viewport.context.types\";\n\nconst ViewportContext = createContext<ViewportContextType>();\n\nexport const ViewportContextProvider = ViewportContext.Provider;\n\nexport const useParentViewportContext = () => useContext(ViewportContext);\n\nconst getWindowRect = () =>\n    DOMRect.fromRect({\n        x: 0,\n        y: 0,\n        width: window.innerWidth,\n        height: window.innerHeight,\n    });\n\nconst useViewportWithFallback = (): ViewportContextType => {\n    const [getViewportFallbackRect, setViewportFallbackRect] = createSignal<DOMRect>(getWindowRect());\n\n    const handleWindowResize = () => {\n        setViewportFallbackRect(getWindowRect());\n    };\n\n    onMount(() => {\n        onCleanup(() => {\n            window.removeEventListener(\"resize\", handleWindowResize);\n        });\n\n        window.addEventListener(\"resize\", handleWindowResize);\n    });\n\n    return {\n        getPortalRef: () => undefined,\n        getSize: () => ({\n            width: getViewportFallbackRect().width,\n            height: getViewportFallbackRect().height,\n        }),\n        getScale: () => 1,\n        getScaledRect: getViewportFallbackRect,\n    };\n};\n\nlet fallbackContext: ViewportContextType | undefined;\n\nconst getFallbackContext = () => (fallbackContext ??= createRoot(() => useViewportWithFallback()));\n\nexport const useViewportContext = (): ViewportContextType => {\n    const context = useContext(ViewportContext);\n\n    return context ?? getFallbackContext();\n};\n"],"mappings":";;AAIA,IAAM,kBAAkB,cAAmC;AAE3D,IAAa,0BAA0B,gBAAgB;AAEvD,IAAa,iCAAiC,WAAW,eAAe;AAExE,IAAM,sBACF,QAAQ,SAAS;CACb,GAAG;CACH,GAAG;CACH,OAAO,OAAO;CACd,QAAQ,OAAO;AACnB,CAAC;AAEL,IAAM,gCAAqD;CACvD,MAAM,CAAC,yBAAyB,2BAA2B,aAAsB,cAAc,CAAC;CAEhG,MAAM,2BAA2B;EAC7B,wBAAwB,cAAc,CAAC;CAC3C;CAEA,cAAc;EACV,gBAAgB;GACZ,OAAO,oBAAoB,UAAU,kBAAkB;EAC3D,CAAC;EAED,OAAO,iBAAiB,UAAU,kBAAkB;CACxD,CAAC;CAED,OAAO;EACH,oBAAoB,KAAA;EACpB,gBAAgB;GACZ,OAAO,wBAAwB,CAAC,CAAC;GACjC,QAAQ,wBAAwB,CAAC,CAAC;EACtC;EACA,gBAAgB;EAChB,eAAe;CACnB;AACJ;AAEA,IAAI;AAEJ,IAAM,2BAA4B,oBAAoB,iBAAiB,wBAAwB,CAAC;AAEhG,IAAa,2BAAgD;CAGzD,OAFgB,WAAW,eAEpB,KAAW,mBAAmB;AACzC"}

package/dist/Exotics/Viewport/Viewport.css.js

@@ -0,0 +1,11 @@
+/* empty css                            */
+//#region src/Exotics/Viewport/Viewport.css.ts
+var viewportRootHost = "pt52tp1 pt52tp0";
+var viewportNestedHost = "pt52tp2 pt52tp0";
+var viewportRoot = "pt52tp3";
+var viewportContent = "pt52tp4";
+var viewportPortal = "pt52tp5";
+//#endregion
+export { viewportContent, viewportNestedHost, viewportPortal, viewportRoot, viewportRootHost };
+
+//# sourceMappingURL=Viewport.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Viewport.css.js","names":[],"sources":["../../../src/Exotics/Viewport/Viewport.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nconst viewportHost = style({\n    overflow: \"hidden\",\n});\n\nexport const viewportRootHost = style([\n    viewportHost,\n    { position: \"fixed\", top: 0, left: 0, width: \"100%\", height: \"100%\" },\n]);\n\nexport const viewportNestedHost = style([viewportHost, { position: \"relative\", width: \"100%\", height: \"100%\" }]);\n\nexport const viewportRoot = style({\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    transformOrigin: \"top left\",\n});\n\nexport const viewportContent = style({\n    position: \"relative\",\n    width: \"100%\",\n    height: \"100%\",\n});\n\nexport const viewportPortal = style({\n    position: \"absolute\",\n    inset: 0,\n    zIndex: 10,\n    pointerEvents: \"none\",\n});\n"],"mappings":""}

package/dist/Exotics/Viewport/Viewport.js

@@ -0,0 +1,106 @@
+import { ViewportContextProvider, useParentViewportContext } from "./Viewport.context.js";
+import { ViewportUtils } from "./Viewport.utils.js";
+import { access } from "../../Utils/propUtils.js";
+import { viewportContent, viewportNestedHost, viewportPortal, viewportRoot, viewportRootHost } from "./Viewport.css.js";
+import { createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import { FunctionUtils, RectUtils, Size2d } from "@thewaver/ss-utils";
+import { className, createComponent, effect, insert, setStyleProperty, template, use } from "solid-js/web";
+//#region src/Exotics/Viewport/Viewport.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><div>`);
+var getFit = (viewportSize, availableSize) => RectUtils.fit(viewportSize, availableSize);
+var getWindowInnerSize = () => ({
+	width: window.innerWidth,
+	height: window.innerHeight
+});
+var Viewport = (props) => {
+	const parentContext = useParentViewportContext();
+	const [getPortalRef, setPortalRef] = createSignal();
+	const [getHostRef, setHostRef] = createSignal();
+	const [getHostSize, setHostSize] = createSignal({
+		width: 0,
+		height: 0
+	}, { equals: Size2d.isSame });
+	const [getWindowSize, setWindowSize] = createSignal(getWindowInnerSize());
+	let isDisposed = false;
+	const throttleResize = FunctionUtils.trailingThrottle(() => {
+		if (isDisposed) return;
+		setWindowSize(getWindowInnerSize());
+	}, 10);
+	const getAvailableSize = createMemo(() => parentContext ? getHostSize() : getWindowSize());
+	const getSizeData = createMemo(() => {
+		const rect = getFit(access(props.size), getAvailableSize());
+		return {
+			scale: rect.scale,
+			scaleRect: new DOMRect(rect.x, rect.y, rect.width, rect.height)
+		};
+	});
+	const getScale = createMemo(() => (parentContext?.getScale() ?? 1) * getSizeData().scale);
+	const getScaledRect = () => {
+		const rect = getSizeData().scaleRect;
+		const host = getHostRef();
+		if (!parentContext || !host) return rect;
+		const composed = ViewportUtils.composeScaledRect(rect, host.getBoundingClientRect(), parentContext.getScale());
+		return new DOMRect(composed.x, composed.y, composed.width, composed.height);
+	};
+	onMount(() => {
+		onCleanup(() => {
+			isDisposed = true;
+			window.removeEventListener("resize", throttleResize);
+		});
+		if (!parentContext) {
+			window.addEventListener("resize", throttleResize);
+			return;
+		}
+		const host = getHostRef();
+		if (!host) return;
+		const observer = new ResizeObserver(() => {
+			setHostSize({
+				width: host.clientWidth,
+				height: host.clientHeight
+			});
+		});
+		observer.observe(host);
+		onCleanup(() => {
+			observer.disconnect();
+		});
+	});
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		use(setHostRef, _el$);
+		className(_el$2, viewportRoot);
+		insert(_el$2, createComponent(ViewportContextProvider, {
+			value: {
+				getPortalRef,
+				getSize: () => access(props.size),
+				getScale,
+				getScaledRect
+			},
+			get children() {
+				var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild;
+				className(_el$3, viewportContent);
+				use(setPortalRef, _el$4);
+				className(_el$4, viewportPortal);
+				insert(_el$3, () => props.children, null);
+				return _el$3;
+			}
+		}));
+		effect((_p$) => {
+			var _v$ = parentContext ? viewportNestedHost : viewportRootHost, _v$2 = `${access(props.size).width}px`, _v$3 = `${access(props.size).height}px`, _v$4 = `translate(${getSizeData().scaleRect.left}px, ${getSizeData().scaleRect.top}px) scale(${getSizeData().scale}, ${getSizeData().scale})`;
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$2, "width", _p$.t = _v$2);
+			_v$3 !== _p$.a && setStyleProperty(_el$2, "height", _p$.a = _v$3);
+			_v$4 !== _p$.o && setStyleProperty(_el$2, "transform", _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+};
+//#endregion
+export { Viewport };
+
+//# sourceMappingURL=Viewport.js.map

package/dist/Exotics/Viewport/Viewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewport.js","names":["ParentProps","createMemo","createSignal","onCleanup","onMount","FunctionUtils","RectUtils","Size2d","access","ViewportContextProvider","useParentViewportContext","ViewportProps","ViewportUtils","styles","getFit","viewportSize","availableSize","fit","getWindowInnerSize","width","window","innerWidth","height","innerHeight","Viewport","props","parentContext","getPortalRef","setPortalRef","HTMLElement","getHostRef","setHostRef","getHostSize","setHostSize","equals","isSame","getWindowSize","setWindowSize","isDisposed","throttleResize","trailingThrottle","getAvailableSize","getSizeData","rect","size","scale","scaleRect","DOMRect","x","y","getScale","getScaledRect","host","composed","composeScaledRect","getBoundingClientRect","removeEventListener","addEventListener","observer","ResizeObserver","clientWidth","clientHeight","observe","disconnect","_el$","_tmpl$","_el$2","firstChild","_$use","_$className","viewportRoot","_$insert","_$createComponent","value","getSize","children","_el$3","_el$4","viewportContent","viewportPortal","_$effect","_p$","_v$","viewportNestedHost","viewportRootHost","_v$2","_v$3","_v$4","left","top","e","t","_$setStyleProperty","a","o","undefined"],"sources":["../../../src/Exotics/Viewport/Viewport.tsx"],"sourcesContent":["import type { ParentProps } from \"solid-js\";\nimport { createMemo, createSignal, onCleanup, onMount } from \"solid-js\";\n\nimport { FunctionUtils, RectUtils, Size2d } from \"@thewaver/ss-utils\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport { ViewportContextProvider, useParentViewportContext } from \"./Viewport.context\";\nimport type { ViewportProps } from \"./Viewport.types\";\nimport { ViewportUtils } from \"./Viewport.utils\";\n\nimport * as styles from \"./Viewport.css\";\n\nconst getFit = (viewportSize: Size2d, availableSize: Size2d) => RectUtils.fit(viewportSize, availableSize);\n\nconst getWindowInnerSize = () => ({ width: window.innerWidth, height: window.innerHeight });\n\nexport const Viewport = (props: ParentProps<ViewportProps>) => {\n    const parentContext = useParentViewportContext();\n\n    const [getPortalRef, setPortalRef] = createSignal<HTMLElement>();\n    const [getHostRef, setHostRef] = createSignal<HTMLElement>();\n    const [getHostSize, setHostSize] = createSignal<Size2d>({ width: 0, height: 0 }, { equals: Size2d.isSame });\n    const [getWindowSize, setWindowSize] = createSignal<Size2d>(getWindowInnerSize());\n\n    let isDisposed = false;\n\n    const throttleResize = FunctionUtils.trailingThrottle(() => {\n        if (isDisposed) return;\n\n        setWindowSize(getWindowInnerSize());\n    }, 10);\n\n    const getAvailableSize = createMemo(() => (parentContext ? getHostSize() : getWindowSize()));\n\n    const getSizeData = createMemo(() => {\n        const rect = getFit(access(props.size), getAvailableSize());\n\n        return {\n            scale: rect.scale,\n            scaleRect: new DOMRect(rect.x, rect.y, rect.width, rect.height),\n        };\n    });\n\n    const getScale = createMemo(() => (parentContext?.getScale() ?? 1) * getSizeData().scale);\n\n    const getScaledRect = () => {\n        const rect = getSizeData().scaleRect;\n        const host = getHostRef();\n\n        if (!parentContext || !host) return rect;\n\n        const composed = ViewportUtils.composeScaledRect(rect, host.getBoundingClientRect(), parentContext.getScale());\n\n        return new DOMRect(composed.x, composed.y, composed.width, composed.height);\n    };\n\n    onMount(() => {\n        onCleanup(() => {\n            isDisposed = true;\n            window.removeEventListener(\"resize\", throttleResize);\n        });\n\n        if (!parentContext) {\n            window.addEventListener(\"resize\", throttleResize);\n\n            return;\n        }\n\n        const host = getHostRef();\n\n        if (!host) return;\n\n        const observer = new ResizeObserver(() => {\n            setHostSize({ width: host.clientWidth, height: host.clientHeight });\n        });\n\n        observer.observe(host);\n\n        onCleanup(() => {\n            observer.disconnect();\n        });\n    });\n\n    return (\n        <div ref={setHostRef} class={parentContext ? styles.viewportNestedHost : styles.viewportRootHost}>\n            <div\n                class={styles.viewportRoot}\n                style={{\n                    width: `${access(props.size).width}px`,\n                    height: `${access(props.size).height}px`,\n                    transform: `translate(${getSizeData().scaleRect.left}px, ${getSizeData().scaleRect.top}px) scale(${getSizeData().scale}, ${getSizeData().scale})`,\n                }}\n            >\n                <ViewportContextProvider\n                    value={{\n                        getPortalRef,\n                        getSize: () => access(props.size),\n                        getScale,\n                        getScaledRect,\n                    }}\n                >\n                    <div class={styles.viewportContent}>\n                        <div ref={setPortalRef} class={styles.viewportPortal} />\n                        {props.children}\n                    </div>\n                </ViewportContextProvider>\n            </div>\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;AAYA,IAAMc,UAAUC,cAAsBC,kBAA0BV,UAAUW,IAAIF,cAAcC,aAAa;AAEzG,IAAME,4BAA4B;CAAEC,OAAOC,OAAOC;CAAYC,QAAQF,OAAOG;AAAY;AAEzF,IAAaC,YAAYC,UAAsC;CAC3D,MAAMC,gBAAgBhB,yBAAyB;CAE/C,MAAM,CAACiB,cAAcC,gBAAgB1B,aAA0B;CAC/D,MAAM,CAAC4B,YAAYC,cAAc7B,aAA0B;CAC3D,MAAM,CAAC8B,aAAaC,eAAe/B,aAAqB;EAAEiB,OAAO;EAAGG,QAAQ;CAAE,GAAG,EAAEY,QAAQ3B,OAAO4B,OAAO,CAAC;CAC1G,MAAM,CAACC,eAAeC,iBAAiBnC,aAAqBgB,mBAAmB,CAAC;CAEhF,IAAIoB,aAAa;CAEjB,MAAMC,iBAAiBlC,cAAcmC,uBAAuB;EACxD,IAAIF,YAAY;EAEhBD,cAAcnB,mBAAmB,CAAC;CACtC,GAAG,EAAE;CAEL,MAAMuB,mBAAmBxC,iBAAkByB,gBAAgBM,YAAY,IAAII,cAAc,CAAE;CAE3F,MAAMM,cAAczC,iBAAiB;EACjC,MAAM0C,OAAO7B,OAAON,OAAOiB,MAAMmB,IAAI,GAAGH,iBAAiB,CAAC;EAE1D,OAAO;GACHI,OAAOF,KAAKE;GACZC,WAAW,IAAIC,QAAQJ,KAAKK,GAAGL,KAAKM,GAAGN,KAAKxB,OAAOwB,KAAKrB,MAAM;EAClE;CACJ,CAAC;CAED,MAAM4B,WAAWjD,kBAAkByB,eAAewB,SAAS,KAAK,KAAKR,YAAY,CAAC,CAACG,KAAK;CAExF,MAAMM,sBAAsB;EACxB,MAAMR,OAAOD,YAAY,CAAC,CAACI;EAC3B,MAAMM,OAAOtB,WAAW;EAExB,IAAI,CAACJ,iBAAiB,CAAC0B,MAAM,OAAOT;EAEpC,MAAMU,WAAWzC,cAAc0C,kBAAkBX,MAAMS,KAAKG,sBAAsB,GAAG7B,cAAcwB,SAAS,CAAC;EAE7G,OAAO,IAAIH,QAAQM,SAASL,GAAGK,SAASJ,GAAGI,SAASlC,OAAOkC,SAAS/B,MAAM;CAC9E;CAEAlB,cAAc;EACVD,gBAAgB;GACZmC,aAAa;GACblB,OAAOoC,oBAAoB,UAAUjB,cAAc;EACvD,CAAC;EAED,IAAI,CAACb,eAAe;GAChBN,OAAOqC,iBAAiB,UAAUlB,cAAc;GAEhD;EACJ;EAEA,MAAMa,OAAOtB,WAAW;EAExB,IAAI,CAACsB,MAAM;EAEX,MAAMM,WAAW,IAAIC,qBAAqB;GACtC1B,YAAY;IAAEd,OAAOiC,KAAKQ;IAAatC,QAAQ8B,KAAKS;GAAa,CAAC;EACtE,CAAC;EAEDH,SAASI,QAAQV,IAAI;EAErBjD,gBAAgB;GACZuD,SAASK,WAAW;EACxB,CAAC;CACL,CAAC;CAED,cAAA;EAAA,IAAAC,OAAAC,OAAA,GAAAC,QAAAF,KAAAG;EAAAC,IACcrC,YAAUiC,IAAA;EAAAK,UAAAH,OAELrD,YAAmB;EAAA0D,OAAAL,OAAAM,gBAOzB/D,yBAAuB;GACpBgE,OAAO;IACH9C;IACA+C,eAAelE,OAAOiB,MAAMmB,IAAI;IAChCM;IACAC;GACJ;GAAC,IAAAwB,WAAA;IAAA,IAAAC,QAAAX,OAAA,GAAAY,QAAAD,MAAAT;IAAAE,UAAAO,OAEW/D,eAAsB;IAAAuD,IACpBxC,cAAYiD,KAAA;IAAAR,UAAAQ,OAAShE,cAAqB;IAAA0D,OAAAK,aACnDnD,MAAMkD,UAAQ,IAAA;IAAA,OAAAC;GAAA;EAAA,CAAA,CAAA;EAAAI,QAAAC,QAAA;GAAA,IAAAC,MAnBFxD,gBAAgBb,qBAA4BA,kBAAuBwE,OAI7E,GAAG7E,OAAOiB,MAAMmB,IAAI,CAAC,CAACzB,MAAK,KAAImE,OAC9B,GAAG9E,OAAOiB,MAAMmB,IAAI,CAAC,CAACtB,OAAM,KAAIiE,OAC7B,aAAa7C,YAAY,CAAC,CAACI,UAAU0C,KAAI,MAAO9C,YAAY,CAAC,CAACI,UAAU2C,IAAG,YAAa/C,YAAY,CAAC,CAACG,MAAK,IAAKH,YAAY,CAAC,CAACG,MAAK;GAAGqC,QAAAD,IAAAS,KAAArB,UAAAL,MAAAiB,IAAAS,IAAAR,GAAA;GAAAG,SAAAJ,IAAAU,KAAAC,iBAAA1B,OAAA,SAAAe,IAAAU,IAAAN,IAAA;GAAAC,SAAAL,IAAAY,KAAAD,iBAAA1B,OAAA,UAAAe,IAAAY,IAAAP,IAAA;GAAAC,SAAAN,IAAAa,KAAAF,iBAAA1B,OAAA,aAAAe,IAAAa,IAAAP,IAAA;GAAA,OAAAN;EAAA,GAAA;GAAAS,GAAAK,KAAAA;GAAAJ,GAAAI,KAAAA;GAAAF,GAAAE,KAAAA;GAAAD,GAAAC,KAAAA;EAAA,CAAA;EAAA,OAAA/B;CAAA,EAAA,CAAA;AAmBrK"}