@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Abstracts/Anchor/Anchor.js

@@ -0,0 +1,96 @@
+import { useViewportContext } from "../../Exotics/Viewport/Viewport.context.js";
+import { ElementObserver } from "../ElementObserver/ElementObserver.js";
+import { Elevation } from "../Elevation/Elevation.js";
+import { AnchorUtils } from "./Anchor.utils.js";
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { Rect, Size2d } from "@thewaver/ss-utils";
+//#region src/Abstracts/Anchor/Anchor.ts
+var Anchor;
+(function(_Anchor) {
+	_Anchor.createPortalPosition = (getAnchorRef, getIsVisible, opts) => {
+		const viewportContext = useViewportContext();
+		const [getContentRef, setContentRef] = createSignal();
+		const [getContentSize, setContentSize] = createSignal(void 0, { equals: Size2d.isSame });
+		const [getObservedRect, setAnchorRect] = createSignal(void 0, { equals: Rect.isSame });
+		const getAnchorRect = createMemo(() => opts.getAnchorRect?.() ?? getObservedRect());
+		const getPlacement = createMemo(() => {
+			const contentSize = getContentSize();
+			const anchorRect = getAnchorRect();
+			const screenSize = {
+				width: viewportContext.getSize().width,
+				height: viewportContext.getSize().height
+			};
+			const offset = opts.getOffset?.();
+			const placement = opts.getPlacement();
+			const reservedScreenSize = opts.getReservedScreenSize?.();
+			if (!contentSize || !anchorRect) return placement;
+			return {
+				x: AnchorUtils.getSafeHPlacement(placement.x, anchorRect, contentSize, screenSize, offset, reservedScreenSize),
+				y: AnchorUtils.getSafeVPlacement(placement.y, anchorRect, contentSize, screenSize, offset, reservedScreenSize)
+			};
+		});
+		const getBands = createMemo(() => {
+			const anchorRect = getAnchorRect();
+			const placement = getPlacement();
+			const screenSize = viewportContext.getSize();
+			const reservedScreenSize = opts.getReservedScreenSize?.();
+			const offset = opts.getOffset?.();
+			const kinds = {
+				x: anchorRect ? AnchorUtils.getHBandKind(placement.x) : "over",
+				y: anchorRect ? AnchorUtils.getVBandKind(placement.y) : "over"
+			};
+			return {
+				kinds,
+				x: AnchorUtils.getBand(kinds.x, anchorRect?.x ?? 0, anchorRect?.width ?? 0, offset?.x ?? 0, screenSize.width, reservedScreenSize?.width ?? 0),
+				y: AnchorUtils.getBand(kinds.y, anchorRect?.y ?? 0, anchorRect?.height ?? 0, offset?.y ?? 0, screenSize.height, reservedScreenSize?.height ?? 0)
+			};
+		});
+		const getPosition = createMemo(() => {
+			const anchorRect = getAnchorRect();
+			const contentSize = getContentSize();
+			const placement = getPlacement();
+			const bands = getBands();
+			if (!anchorRect || !contentSize) return;
+			const x = AnchorUtils.getHPlacementShift(placement.x, anchorRect, contentSize) + AnchorUtils.getHPlacementOffset(placement.x, opts.getOffset?.().x ?? 0);
+			const y = AnchorUtils.getVPlacementShift(placement.y, anchorRect, contentSize) + AnchorUtils.getVPlacementOffset(placement.y, opts.getOffset?.().y ?? 0);
+			return {
+				x: AnchorUtils.clampToBand(x, contentSize.width, bands.x, bands.kinds.x),
+				y: AnchorUtils.clampToBand(y, contentSize.height, bands.y, bands.kinds.y)
+			};
+		});
+		const getZIndex = createMemo(() => {
+			if (!getIsVisible()) return 1;
+			const anchorRef = getAnchorRef();
+			return Math.max(AnchorUtils.getStackingBase(anchorRef), Elevation.getBase(anchorRef)) + 1;
+		});
+		ElementObserver.createViewportRectObserver(getAnchorRef, () => getIsVisible() && !opts.getAnchorRect, { setElementRect: setAnchorRect });
+		createEffect(() => {
+			let contentResizeObserver;
+			onCleanup(() => {
+				contentResizeObserver?.disconnect();
+				setContentSize(void 0);
+			});
+			const contentRef = getContentRef();
+			const isVisible = getIsVisible();
+			if (!contentRef || !isVisible) return;
+			contentResizeObserver = new ResizeObserver(() => {
+				setContentSize({
+					width: contentRef.offsetWidth,
+					height: contentRef.offsetHeight
+				});
+			});
+			contentResizeObserver.observe(contentRef);
+		});
+		return {
+			getAnchorRect,
+			getPlacement,
+			getPosition,
+			getZIndex,
+			setContentRef
+		};
+	};
+})(Anchor || (Anchor = {}));
+//#endregion
+export { Anchor };
+
+//# sourceMappingURL=Anchor.js.map

package/dist/Abstracts/Anchor/Anchor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Anchor.js","names":[],"sources":["../../../src/Abstracts/Anchor/Anchor.ts"],"sourcesContent":["import type { Accessor } from \"solid-js\";\r\nimport { createEffect, createMemo, createSignal, onCleanup } from \"solid-js\";\r\n\r\nimport { type Point2d, Rect, Size2d } from \"@thewaver/ss-utils\";\r\n\r\nimport { useViewportContext } from \"../../Exotics/Viewport/Viewport.context\";\r\nimport { ElementObserver } from \"../ElementObserver/ElementObserver\";\r\nimport { Elevation } from \"../Elevation/Elevation\";\r\nimport type { AnchorPlacement } from \"./Anchor.types\";\r\nimport { AnchorUtils } from \"./Anchor.utils\";\r\n\r\nexport namespace Anchor {\r\n    export const createPortalPosition = (\r\n        getAnchorRef: Accessor<HTMLElement | undefined>,\r\n        getIsVisible: Accessor<boolean>,\r\n        opts: {\r\n            getPlacement: Accessor<AnchorPlacement>;\r\n            getOffset?: () => Point2d;\r\n            getReservedScreenSize?: () => Size2d;\r\n            getAnchorRect?: () => Rect | undefined;\r\n        },\r\n    ) => {\r\n        const viewportContext = useViewportContext();\r\n\r\n        const [getContentRef, setContentRef] = createSignal<HTMLElement>();\r\n        const [getContentSize, setContentSize] = createSignal<Size2d | undefined>(undefined, {\r\n            equals: Size2d.isSame,\r\n        });\r\n        const [getObservedRect, setAnchorRect] = createSignal<Rect | undefined>(undefined, {\r\n            equals: Rect.isSame,\r\n        });\r\n\r\n        const getAnchorRect = createMemo(() => opts.getAnchorRect?.() ?? getObservedRect());\r\n\r\n        const getPlacement = createMemo((): AnchorPlacement => {\r\n            const contentSize = getContentSize();\r\n            const anchorRect = getAnchorRect();\r\n            const screenSize: Size2d = {\r\n                width: viewportContext.getSize().width,\r\n                height: viewportContext.getSize().height,\r\n            };\r\n            const offset = opts.getOffset?.();\r\n            const placement = opts.getPlacement();\r\n            const reservedScreenSize = opts.getReservedScreenSize?.();\r\n\r\n            if (!contentSize || !anchorRect) return placement;\r\n\r\n            return {\r\n                x: AnchorUtils.getSafeHPlacement(\r\n                    placement.x,\r\n                    anchorRect,\r\n                    contentSize,\r\n                    screenSize,\r\n                    offset,\r\n                    reservedScreenSize,\r\n                ),\r\n                y: AnchorUtils.getSafeVPlacement(\r\n                    placement.y,\r\n                    anchorRect,\r\n                    contentSize,\r\n                    screenSize,\r\n                    offset,\r\n                    reservedScreenSize,\r\n                ),\r\n            };\r\n        });\r\n\r\n        const getBands = createMemo(() => {\r\n            const anchorRect = getAnchorRect();\r\n            const placement = getPlacement();\r\n            const screenSize = viewportContext.getSize();\r\n            const reservedScreenSize = opts.getReservedScreenSize?.();\r\n            const offset = opts.getOffset?.();\r\n\r\n            const kinds = {\r\n                x: anchorRect ? AnchorUtils.getHBandKind(placement.x) : (\"over\" as const),\r\n                y: anchorRect ? AnchorUtils.getVBandKind(placement.y) : (\"over\" as const),\r\n            };\r\n\r\n            return {\r\n                kinds,\r\n                x: AnchorUtils.getBand(\r\n                    kinds.x,\r\n                    anchorRect?.x ?? 0,\r\n                    anchorRect?.width ?? 0,\r\n                    offset?.x ?? 0,\r\n                    screenSize.width,\r\n                    reservedScreenSize?.width ?? 0,\r\n                ),\r\n                y: AnchorUtils.getBand(\r\n                    kinds.y,\r\n                    anchorRect?.y ?? 0,\r\n                    anchorRect?.height ?? 0,\r\n                    offset?.y ?? 0,\r\n                    screenSize.height,\r\n                    reservedScreenSize?.height ?? 0,\r\n                ),\r\n            };\r\n        });\r\n\r\n        const getPosition = createMemo(() => {\r\n            const anchorRect = getAnchorRect();\r\n            const contentSize = getContentSize();\r\n            const placement = getPlacement();\r\n            const bands = getBands();\r\n\r\n            if (!anchorRect || !contentSize) return;\r\n\r\n            const x =\r\n                AnchorUtils.getHPlacementShift(placement.x, anchorRect, contentSize) +\r\n                AnchorUtils.getHPlacementOffset(placement.x, opts.getOffset?.().x ?? 0);\r\n            const y =\r\n                AnchorUtils.getVPlacementShift(placement.y, anchorRect, contentSize) +\r\n                AnchorUtils.getVPlacementOffset(placement.y, opts.getOffset?.().y ?? 0);\r\n\r\n            return {\r\n                x: AnchorUtils.clampToBand(x, contentSize.width, bands.x, bands.kinds.x),\r\n                y: AnchorUtils.clampToBand(y, contentSize.height, bands.y, bands.kinds.y),\r\n            };\r\n        });\r\n\r\n        const getZIndex = createMemo(() => {\r\n            if (!getIsVisible()) return 1;\r\n\r\n            const anchorRef = getAnchorRef();\r\n\r\n            return Math.max(AnchorUtils.getStackingBase(anchorRef), Elevation.getBase(anchorRef)) + 1;\r\n        });\r\n\r\n        ElementObserver.createViewportRectObserver(getAnchorRef, () => getIsVisible() && !opts.getAnchorRect, {\r\n            setElementRect: setAnchorRect,\r\n        });\r\n\r\n        createEffect(() => {\r\n            let contentResizeObserver: ResizeObserver | undefined;\r\n\r\n            onCleanup(() => {\r\n                contentResizeObserver?.disconnect();\r\n                setContentSize(undefined);\r\n            });\r\n\r\n            const contentRef = getContentRef();\r\n            const isVisible = getIsVisible();\r\n\r\n            if (!contentRef || !isVisible) return;\r\n\r\n            contentResizeObserver = new ResizeObserver(() => {\r\n                setContentSize({ width: contentRef.offsetWidth, height: contentRef.offsetHeight });\r\n            });\r\n            contentResizeObserver.observe(contentRef);\r\n        });\r\n\r\n        return { getAnchorRect, getPlacement, getPosition, getZIndex, setContentRef };\r\n    };\r\n}\r\n"],"mappings":"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"}

package/dist/Abstracts/Anchor/Anchor.utils.js

@@ -0,0 +1,114 @@
+import "@thewaver/ss-utils";
+//#region src/Abstracts/Anchor/Anchor.utils.ts
+var AnchorUtils;
+(function(_AnchorUtils) {
+	const getHPlacementShift = _AnchorUtils.getHPlacementShift = (hPlacement, anchorRect, contentSize) => {
+		switch (hPlacement) {
+			case "left-in": return anchorRect.x;
+			case "left-out": return anchorRect.x - contentSize.width;
+			case "right-in": return anchorRect.x + anchorRect.width - contentSize.width;
+			case "right-out": return anchorRect.x + anchorRect.width;
+			case "center": return anchorRect.x + (anchorRect.width - contentSize.width) * .5;
+		}
+	};
+	const getVPlacementShift = _AnchorUtils.getVPlacementShift = (vPlacement, anchorRect, contentSize) => {
+		switch (vPlacement) {
+			case "top-in": return anchorRect.y;
+			case "top-out": return anchorRect.y - contentSize.height;
+			case "bottom-in": return anchorRect.y + anchorRect.height - contentSize.height;
+			case "bottom-out": return anchorRect.y + anchorRect.height;
+			case "center": return anchorRect.y + (anchorRect.height - contentSize.height) * .5;
+		}
+	};
+	const getHPlacementOffset = _AnchorUtils.getHPlacementOffset = (hPlacement, offsetX) => {
+		switch (hPlacement) {
+			case "left-in":
+			case "right-out": return offsetX;
+			case "left-out":
+			case "right-in": return -offsetX;
+			default: return 0;
+		}
+	};
+	const getVPlacementOffset = _AnchorUtils.getVPlacementOffset = (vPlacement, offsetY) => {
+		switch (vPlacement) {
+			case "top-in":
+			case "bottom-out": return offsetY;
+			case "top-out":
+			case "bottom-in": return -offsetY;
+			default: return 0;
+		}
+	};
+	const H_FAMILIES = {
+		"left-in": ["left-in", "right-in"],
+		"right-in": ["right-in", "left-in"],
+		"left-out": ["left-out", "right-out"],
+		"right-out": ["right-out", "left-out"],
+		"center": [
+			"center",
+			"left-in",
+			"right-in"
+		]
+	};
+	const V_FAMILIES = {
+		"top-in": ["top-in", "bottom-in"],
+		"bottom-in": ["bottom-in", "top-in"],
+		"top-out": ["top-out", "bottom-out"],
+		"bottom-out": ["bottom-out", "top-out"],
+		"center": [
+			"center",
+			"top-in",
+			"bottom-in"
+		]
+	};
+	_AnchorUtils.getBand = (kind, anchorStart, anchorSize, offset, limit, reserved) => {
+		const first = reserved;
+		const last = limit - reserved;
+		if (kind === "before") return {
+			start: first,
+			end: Math.max(first, anchorStart - offset)
+		};
+		if (kind === "after") return {
+			start: Math.min(last, anchorStart + anchorSize + offset),
+			end: last
+		};
+		return {
+			start: first,
+			end: last
+		};
+	};
+	_AnchorUtils.getHBandKind = (hPlacement) => hPlacement === "left-out" ? "before" : hPlacement === "right-out" ? "after" : "over";
+	_AnchorUtils.getVBandKind = (vPlacement) => vPlacement === "top-out" ? "before" : vPlacement === "bottom-out" ? "after" : "over";
+	_AnchorUtils.clampToBand = (start, size, band, kind) => {
+		if (kind === "before") return Math.min(start, band.end - size);
+		if (kind === "after") return Math.max(start, band.start);
+		return Math.max(band.start, Math.min(start, band.end - size));
+	};
+	_AnchorUtils.getBandSize = (band) => Math.max(0, band.end - band.start);
+	const getOverflow = (start, size, limit, reserved) => Math.max(0, reserved - start) + Math.max(0, start + size - (limit - reserved));
+	_AnchorUtils.getSafeHPlacement = (hPlacement, anchorRect, contentSize, screenSize, offsetSize, reservedScreenSize) => {
+		const offsetX = offsetSize?.x ?? 0;
+		const reservedW = reservedScreenSize?.width ?? 0;
+		const getCandidateOverflow = (candidate) => getOverflow(getHPlacementShift(candidate, anchorRect, contentSize) + getHPlacementOffset(candidate, offsetX), contentSize.width, screenSize.width, reservedW);
+		return H_FAMILIES[hPlacement].reduce((best, candidate) => getCandidateOverflow(candidate) < getCandidateOverflow(best) ? candidate : best);
+	};
+	_AnchorUtils.getSafeVPlacement = (vPlacement, anchorRect, contentSize, screenSize, offsetSize, reservedScreenSize) => {
+		const offsetY = offsetSize?.y ?? 0;
+		const reservedH = reservedScreenSize?.height ?? 0;
+		const getCandidateOverflow = (candidate) => getOverflow(getVPlacementShift(candidate, anchorRect, contentSize) + getVPlacementOffset(candidate, offsetY), contentSize.height, screenSize.height, reservedH);
+		return V_FAMILIES[vPlacement].reduce((best, candidate) => getCandidateOverflow(candidate) < getCandidateOverflow(best) ? candidate : best);
+	};
+	_AnchorUtils.getStackingBase = (element) => {
+		let node = element ?? null;
+		let base = 0;
+		while (node) {
+			const zIndex = Number.parseInt(getComputedStyle(node).zIndex, 10);
+			if (!Number.isNaN(zIndex)) base = Math.max(base, zIndex);
+			node = node.parentElement;
+		}
+		return base;
+	};
+})(AnchorUtils || (AnchorUtils = {}));
+//#endregion
+export { AnchorUtils };
+
+//# sourceMappingURL=Anchor.utils.js.map

package/dist/Abstracts/Anchor/Anchor.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Anchor.utils.js","names":[],"sources":["../../../src/Abstracts/Anchor/Anchor.utils.ts"],"sourcesContent":["import { Point2d, Rect, Size2d } from \"@thewaver/ss-utils\";\n\nimport type { AnchorBand, AnchorBandKind, AnchorHPlacement, AnchorVPlacement } from \"./Anchor.types\";\n\nexport namespace AnchorUtils {\n    export const getHPlacementShift = (hPlacement: AnchorHPlacement, anchorRect: Rect, contentSize: Size2d) => {\n        switch (hPlacement) {\n            case \"left-in\": {\n                return anchorRect.x;\n            }\n            case \"left-out\": {\n                return anchorRect.x - contentSize.width;\n            }\n            case \"right-in\": {\n                return anchorRect.x + anchorRect.width - contentSize.width;\n            }\n            case \"right-out\": {\n                return anchorRect.x + anchorRect.width;\n            }\n            case \"center\": {\n                return anchorRect.x + (anchorRect.width - contentSize.width) * 0.5;\n            }\n        }\n    };\n\n    export const getVPlacementShift = (vPlacement: AnchorVPlacement, anchorRect: Rect, contentSize: Size2d) => {\n        switch (vPlacement) {\n            case \"top-in\": {\n                return anchorRect.y;\n            }\n            case \"top-out\": {\n                return anchorRect.y - contentSize.height;\n            }\n            case \"bottom-in\": {\n                return anchorRect.y + anchorRect.height - contentSize.height;\n            }\n            case \"bottom-out\": {\n                return anchorRect.y + anchorRect.height;\n            }\n            case \"center\": {\n                return anchorRect.y + (anchorRect.height - contentSize.height) * 0.5;\n            }\n        }\n    };\n\n    export const getHPlacementOffset = (hPlacement: AnchorHPlacement, offsetX: number) => {\n        switch (hPlacement) {\n            case \"left-in\":\n            case \"right-out\":\n                return offsetX;\n            case \"left-out\":\n            case \"right-in\":\n                return -offsetX;\n            default:\n                return 0;\n        }\n    };\n\n    export const getVPlacementOffset = (vPlacement: AnchorVPlacement, offsetY: number) => {\n        switch (vPlacement) {\n            case \"top-in\":\n            case \"bottom-out\":\n                return offsetY;\n            case \"top-out\":\n            case \"bottom-in\":\n                return -offsetY;\n            default:\n                return 0;\n        }\n    };\n\n    const H_FAMILIES: Record<AnchorHPlacement, readonly AnchorHPlacement[]> = {\n        \"left-in\": [\"left-in\", \"right-in\"],\n        \"right-in\": [\"right-in\", \"left-in\"],\n        \"left-out\": [\"left-out\", \"right-out\"],\n        \"right-out\": [\"right-out\", \"left-out\"],\n        \"center\": [\"center\", \"left-in\", \"right-in\"],\n    };\n\n    const V_FAMILIES: Record<AnchorVPlacement, readonly AnchorVPlacement[]> = {\n        \"top-in\": [\"top-in\", \"bottom-in\"],\n        \"bottom-in\": [\"bottom-in\", \"top-in\"],\n        \"top-out\": [\"top-out\", \"bottom-out\"],\n        \"bottom-out\": [\"bottom-out\", \"top-out\"],\n        \"center\": [\"center\", \"top-in\", \"bottom-in\"],\n    };\n\n    export const getBand = (\n        kind: AnchorBandKind,\n        anchorStart: number,\n        anchorSize: number,\n        offset: number,\n        limit: number,\n        reserved: number,\n    ): AnchorBand => {\n        const first = reserved;\n        const last = limit - reserved;\n\n        if (kind === \"before\") return { start: first, end: Math.max(first, anchorStart - offset) };\n        if (kind === \"after\") return { start: Math.min(last, anchorStart + anchorSize + offset), end: last };\n\n        return { start: first, end: last };\n    };\n\n    export const getHBandKind = (hPlacement: AnchorHPlacement): AnchorBandKind =>\n        hPlacement === \"left-out\" ? \"before\" : hPlacement === \"right-out\" ? \"after\" : \"over\";\n\n    export const getVBandKind = (vPlacement: AnchorVPlacement): AnchorBandKind =>\n        vPlacement === \"top-out\" ? \"before\" : vPlacement === \"bottom-out\" ? \"after\" : \"over\";\n\n    export const clampToBand = (start: number, size: number, band: AnchorBand, kind: AnchorBandKind) => {\n        if (kind === \"before\") return Math.min(start, band.end - size);\n        if (kind === \"after\") return Math.max(start, band.start);\n\n        return Math.max(band.start, Math.min(start, band.end - size));\n    };\n\n    export const getBandSize = (band: AnchorBand) => Math.max(0, band.end - band.start);\n\n    const getOverflow = (start: number, size: number, limit: number, reserved: number) =>\n        Math.max(0, reserved - start) + Math.max(0, start + size - (limit - reserved));\n\n    export const getSafeHPlacement = (\n        hPlacement: AnchorHPlacement,\n        anchorRect: Rect,\n        contentSize: Size2d,\n        screenSize: Size2d,\n        offsetSize?: Point2d,\n        reservedScreenSize?: Size2d,\n    ): AnchorHPlacement => {\n        const offsetX = offsetSize?.x ?? 0;\n        const reservedW = reservedScreenSize?.width ?? 0;\n\n        const getCandidateOverflow = (candidate: AnchorHPlacement) =>\n            getOverflow(\n                getHPlacementShift(candidate, anchorRect, contentSize)! + getHPlacementOffset(candidate, offsetX),\n                contentSize.width,\n                screenSize.width,\n                reservedW,\n            );\n\n        return H_FAMILIES[hPlacement].reduce((best, candidate) =>\n            getCandidateOverflow(candidate) < getCandidateOverflow(best) ? candidate : best,\n        );\n    };\n\n    export const getSafeVPlacement = (\n        vPlacement: AnchorVPlacement,\n        anchorRect: Rect,\n        contentSize: Size2d,\n        screenSize: Size2d,\n        offsetSize?: Point2d,\n        reservedScreenSize?: Size2d,\n    ): AnchorVPlacement => {\n        const offsetY = offsetSize?.y ?? 0;\n        const reservedH = reservedScreenSize?.height ?? 0;\n\n        const getCandidateOverflow = (candidate: AnchorVPlacement) =>\n            getOverflow(\n                getVPlacementShift(candidate, anchorRect, contentSize)! + getVPlacementOffset(candidate, offsetY),\n                contentSize.height,\n                screenSize.height,\n                reservedH,\n            );\n\n        return V_FAMILIES[vPlacement].reduce((best, candidate) =>\n            getCandidateOverflow(candidate) < getCandidateOverflow(best) ? candidate : best,\n        );\n    };\n\n    export const getStackingBase = (element: HTMLElement | undefined) => {\n        let node: HTMLElement | null = element ?? null;\n        let base = 0;\n\n        while (node) {\n            const zIndex = Number.parseInt(getComputedStyle(node).zIndex, 10);\n\n            if (!Number.isNaN(zIndex)) base = Math.max(base, zIndex);\n\n            node = node.parentElement;\n        }\n\n        return base;\n    };\n}\n"],"mappings":"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"}

package/dist/Abstracts/Barrel/Barrel.css.js

@@ -0,0 +1,10 @@
+/* empty css                          */
+//#region src/Abstracts/Barrel/Barrel.css.ts
+var barrelRoot = "bswg140";
+var barrelPerspective = "bswg141";
+var barrelBody = "bswg142";
+var barrelFace = "bswg143";
+//#endregion
+export { barrelBody, barrelFace, barrelPerspective, barrelRoot };
+
+//# sourceMappingURL=Barrel.css.js.map

package/dist/Abstracts/Barrel/Barrel.css.js.map

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

package/dist/Abstracts/Barrel/Barrel.js

@@ -0,0 +1,92 @@
+import { access } from "../../Utils/propUtils.js";
+import { BARREL_PERSPECTIVE_PX, BarrelUtils } from "./Barrel.utils.js";
+import { barrelBody, barrelFace, barrelPerspective, barrelRoot } from "./Barrel.css.js";
+import { Index, Show, createMemo } from "solid-js";
+import { className, createComponent, effect, insert, memo, setAttribute, setStyleProperty, template } from "solid-js/web";
+//#region src/Abstracts/Barrel/Barrel.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=group>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div><div><div>`);
+var DEFAULT_BARREL_AXIS = "row";
+var DEFAULT_BARREL_FACE_SIZE = {
+	width: 0,
+	height: 0
+};
+var Barrel = (props) => {
+	const getAxis = createMemo(() => access(props.axis) ?? DEFAULT_BARREL_AXIS);
+	const getFaceSize = createMemo(() => access(props.faceSize) ?? DEFAULT_BARREL_FACE_SIZE);
+	const getFaceCount = createMemo(() => access(props.faces).length);
+	const getFaceExtent = createMemo(() => BarrelUtils.getFaceExtent(getFaceSize(), getAxis()));
+	const getApothem = createMemo(() => BarrelUtils.getApothem(getFaceExtent(), getFaceCount()));
+	const getGirth = createMemo(() => BarrelUtils.getGirth(getFaceExtent(), getFaceCount()));
+	const getHasBacks = createMemo(() => access(props.hasBacks) ?? BarrelUtils.getHasBacks(getFaceCount()));
+	const renderBarrelFace = (getFace, index, face) => {
+		const getDefs = createMemo(() => props.computeFaceDefs(index, face));
+		const getTransitionDurationMs = () => access(props.transitionDurationMs);
+		const getTransitionDelayMs = () => access(props.transitionDelayMs);
+		return (() => {
+			var _el$ = _tmpl$();
+			className(_el$, barrelFace);
+			insert(_el$, () => props.renderFace(getFace, index, face));
+			effect((_p$) => {
+				var _v$ = BarrelUtils.getFaceTransform(getAxis(), face, access(props.angle), index, getFaceCount(), getApothem()), _v$2 = getTransitionDurationMs() === void 0 ? void 0 : `${getTransitionDurationMs()}ms`, _v$3 = getTransitionDelayMs() === void 0 ? void 0 : `${getTransitionDelayMs()}ms`, _v$4 = access(props.faceRoleDescription), _v$5 = getDefs().ariaLabel, _v$6 = getDefs().isHidden || void 0, _v$7 = getDefs().isHidden;
+				_v$ !== _p$.e && setStyleProperty(_el$, "transform", _p$.e = _v$);
+				_v$2 !== _p$.t && setStyleProperty(_el$, "transition-duration", _p$.t = _v$2);
+				_v$3 !== _p$.a && setStyleProperty(_el$, "transition-delay", _p$.a = _v$3);
+				_v$4 !== _p$.o && setAttribute(_el$, "aria-roledescription", _p$.o = _v$4);
+				_v$5 !== _p$.i && setAttribute(_el$, "aria-label", _p$.i = _v$5);
+				_v$6 !== _p$.n && setAttribute(_el$, "aria-hidden", _p$.n = _v$6);
+				_v$7 !== _p$.s && (_el$.inert = _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$;
+		})();
+	};
+	return (() => {
+		var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+		className(_el$2, barrelRoot);
+		className(_el$3, barrelPerspective);
+		setStyleProperty(_el$3, "perspective", `${BARREL_PERSPECTIVE_PX}px`);
+		className(_el$4, barrelBody);
+		insert(_el$4, createComponent(Index, {
+			get each() {
+				return access(props.faces);
+			},
+			children: (getFace, index) => [memo(() => renderBarrelFace(getFace, index, "front")), createComponent(Show, {
+				get when() {
+					return getHasBacks();
+				},
+				get children() {
+					return renderBarrelFace(getFace, index, "back");
+				}
+			})]
+		}));
+		effect((_p$) => {
+			var _v$8 = `${getAxis() === "row" ? getGirth() : getFaceSize().width}px`, _v$9 = `${getAxis() === "row" ? getFaceSize().height : getGirth()}px`, _v$0 = `${getFaceSize().width}px`, _v$1 = `${getFaceSize().height}px`, _v$10 = `translateZ(${-getApothem()}px)`;
+			_v$8 !== _p$.e && setStyleProperty(_el$2, "width", _p$.e = _v$8);
+			_v$9 !== _p$.t && setStyleProperty(_el$2, "height", _p$.t = _v$9);
+			_v$0 !== _p$.a && setStyleProperty(_el$3, "width", _p$.a = _v$0);
+			_v$1 !== _p$.o && setStyleProperty(_el$3, "height", _p$.o = _v$1);
+			_v$10 !== _p$.i && setStyleProperty(_el$4, "transform", _p$.i = _v$10);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$2;
+	})();
+};
+//#endregion
+export { Barrel };
+
+//# sourceMappingURL=Barrel.js.map

package/dist/Abstracts/Barrel/Barrel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Barrel.js","names":["Accessor","Index","Show","createMemo","Size2d","access","BarrelAxis","BarrelFace","BarrelProps","BARREL_PERSPECTIVE_PX","BarrelUtils","styles","DEFAULT_BARREL_AXIS","DEFAULT_BARREL_FACE_SIZE","width","height","Barrel","props","T","getAxis","axis","getFaceSize","faceSize","getFaceCount","faces","length","getFaceExtent","getApothem","getGirth","getHasBacks","hasBacks","renderBarrelFace","getFace","index","face","getDefs","computeFaceDefs","getTransitionDurationMs","transitionDurationMs","getTransitionDelayMs","transitionDelayMs","_el$","_tmpl$","_$className","barrelFace","_$insert","renderFace","_$effect","_p$","_v$","getFaceTransform","angle","_v$2","undefined","_v$3","_v$4","faceRoleDescription","_v$5","ariaLabel","_v$6","isHidden","_v$7","e","_$setStyleProperty","t","a","o","_$setAttribute","i","n","s","inert","_el$2","_tmpl$2","_el$3","firstChild","_el$4","barrelRoot","barrelPerspective","barrelBody","_$createComponent","each","children","_$memo","when","_v$8","_v$9","_v$0","_v$1","_v$10"],"sources":["../../../src/Abstracts/Barrel/Barrel.tsx"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { Index, Show, createMemo } from \"solid-js\";\n\nimport type { Size2d } from \"@thewaver/ss-utils\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport type { BarrelAxis, BarrelFace, BarrelProps } from \"./Barrel.types\";\nimport { BARREL_PERSPECTIVE_PX, BarrelUtils } from \"./Barrel.utils\";\n\nimport * as styles from \"./Barrel.css\";\n\nconst DEFAULT_BARREL_AXIS: BarrelAxis = \"row\";\nconst DEFAULT_BARREL_FACE_SIZE: Size2d = { width: 0, height: 0 };\n\nexport const Barrel = <T,>(props: BarrelProps<T>) => {\n    const getAxis = createMemo(() => access(props.axis) ?? DEFAULT_BARREL_AXIS);\n\n    const getFaceSize = createMemo(() => access(props.faceSize) ?? DEFAULT_BARREL_FACE_SIZE);\n\n    const getFaceCount = createMemo(() => access(props.faces).length);\n\n    const getFaceExtent = createMemo(() => BarrelUtils.getFaceExtent(getFaceSize(), getAxis()));\n\n    const getApothem = createMemo(() => BarrelUtils.getApothem(getFaceExtent(), getFaceCount()));\n\n    const getGirth = createMemo(() => BarrelUtils.getGirth(getFaceExtent(), getFaceCount()));\n\n    const getHasBacks = createMemo(() => access(props.hasBacks) ?? BarrelUtils.getHasBacks(getFaceCount()));\n\n    const renderBarrelFace = (getFace: Accessor<T>, index: number, face: BarrelFace) => {\n        const getDefs = createMemo(() => props.computeFaceDefs(index, face));\n\n        const getTransitionDurationMs = () => access(props.transitionDurationMs);\n\n        const getTransitionDelayMs = () => access(props.transitionDelayMs);\n\n        return (\n            <div\n                class={styles.barrelFace}\n                style={{\n                    \"transform\": BarrelUtils.getFaceTransform(\n                        getAxis(),\n                        face,\n                        access(props.angle),\n                        index,\n                        getFaceCount(),\n                        getApothem(),\n                    ),\n                    \"transition-duration\":\n                        getTransitionDurationMs() === undefined ? undefined : `${getTransitionDurationMs()}ms`,\n                    \"transition-delay\":\n                        getTransitionDelayMs() === undefined ? undefined : `${getTransitionDelayMs()}ms`,\n                }}\n                role=\"group\"\n                aria-roledescription={access(props.faceRoleDescription)}\n                aria-label={getDefs().ariaLabel}\n                aria-hidden={getDefs().isHidden || undefined}\n                inert={getDefs().isHidden}\n            >\n                {props.renderFace(getFace, index, face)}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            class={styles.barrelRoot}\n            style={{\n                width: `${getAxis() === \"row\" ? getGirth() : getFaceSize().width}px`,\n                height: `${getAxis() === \"row\" ? getFaceSize().height : getGirth()}px`,\n            }}\n        >\n            <div\n                class={styles.barrelPerspective}\n                style={{\n                    width: `${getFaceSize().width}px`,\n                    height: `${getFaceSize().height}px`,\n                    perspective: `${BARREL_PERSPECTIVE_PX}px`,\n                }}\n            >\n                <div class={styles.barrelBody} style={{ transform: `translateZ(${-getApothem()}px)` }}>\n                    <Index each={access(props.faces)}>\n                        {(getFace, index) => (\n                            <>\n                                {renderBarrelFace(getFace, index, \"front\")}\n\n                                <Show when={getHasBacks()}>{renderBarrelFace(getFace, index, \"back\")}</Show>\n                            </>\n                        )}\n                    </Index>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Abstracts/Barrel/Barrel.utils.js

@@ -0,0 +1,37 @@
+import { RotationUtils } from "@thewaver/ss-utils";
+//#region src/Abstracts/Barrel/Barrel.utils.ts
+var MIN_BARREL_FACE_COUNT = 2;
+var MIN_BACKED_FACE_COUNT = 3;
+var HALF_TURN_DEG = 180;
+var HALF = .5;
+var BARREL_PERSPECTIVE_PX = 1e3;
+var BarrelUtils;
+(function(_BarrelUtils) {
+	_BarrelUtils.getFaceExtent = (faceSize, axis) => axis === "row" ? faceSize.width : faceSize.height;
+	_BarrelUtils.getHasBacks = (faceCount) => faceCount >= MIN_BACKED_FACE_COUNT;
+	const getApothem = _BarrelUtils.getApothem = (faceExtent, faceCount) => {
+		if (faceCount < MIN_BARREL_FACE_COUNT) return 0;
+		const halfAngleTangent = Math.tan(Math.PI / faceCount);
+		if (!Number.isFinite(halfAngleTangent) || halfAngleTangent <= 0) return 0;
+		return Math.round(faceExtent / 2 / halfAngleTangent);
+	};
+	const getCircumdiameter = _BarrelUtils.getCircumdiameter = (faceExtent, faceCount) => {
+		if (faceCount < MIN_BARREL_FACE_COUNT) return faceExtent;
+		return Math.round(faceExtent / Math.sin(Math.PI / faceCount));
+	};
+	const getProjectedExtent = _BarrelUtils.getProjectedExtent = (circumradius, apothem) => {
+		const eyeDistance = BARREL_PERSPECTIVE_PX + apothem;
+		const tangentDistanceSquared = eyeDistance * eyeDistance - circumradius * circumradius;
+		if (tangentDistanceSquared <= 0) return circumradius * 2;
+		return 2 * BARREL_PERSPECTIVE_PX * circumradius / Math.sqrt(tangentDistanceSquared);
+	};
+	_BarrelUtils.getGirth = (faceExtent, faceCount) => getProjectedExtent(getCircumdiameter(faceExtent, faceCount) * HALF, getApothem(faceExtent, faceCount));
+	_BarrelUtils.getFaceTransform = (axis, face, angle, index, faceCount, apothem) => {
+		const rotate = axis === "row" ? "rotateY" : "rotateX";
+		return `${rotate}(${-angle - RotationUtils.getStepAngle(faceCount) * index}deg) translateZ(${apothem}px)${face === "back" ? ` ${rotate}(${HALF_TURN_DEG}deg)` : ""}`;
+	};
+})(BarrelUtils || (BarrelUtils = {}));
+//#endregion
+export { BARREL_PERSPECTIVE_PX, BarrelUtils };
+
+//# sourceMappingURL=Barrel.utils.js.map

package/dist/Abstracts/Barrel/Barrel.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Barrel.utils.js","names":[],"sources":["../../../src/Abstracts/Barrel/Barrel.utils.ts"],"sourcesContent":["import type { Size2d } from \"@thewaver/ss-utils\";\nimport { RotationUtils } from \"@thewaver/ss-utils\";\n\nimport type { BarrelAxis, BarrelFace } from \"./Barrel.types\";\n\nconst MIN_BARREL_FACE_COUNT = 2;\nconst MIN_BACKED_FACE_COUNT = 3;\nconst HALF_TURN_DEG = 180;\nconst HALF = 0.5;\n\nexport const BARREL_PERSPECTIVE_PX = 1000;\n\nexport namespace BarrelUtils {\n    export const getFaceExtent = (faceSize: Size2d, axis: BarrelAxis) =>\n        axis === \"row\" ? faceSize.width : faceSize.height;\n\n    export const getHasBacks = (faceCount: number) => faceCount >= MIN_BACKED_FACE_COUNT;\n\n    export const getApothem = (faceExtent: number, faceCount: number) => {\n        if (faceCount < MIN_BARREL_FACE_COUNT) return 0;\n\n        const halfAngleTangent = Math.tan(Math.PI / faceCount);\n\n        if (!Number.isFinite(halfAngleTangent) || halfAngleTangent <= 0) return 0;\n\n        return Math.round(faceExtent / 2 / halfAngleTangent);\n    };\n\n    export const getCircumdiameter = (faceExtent: number, faceCount: number) => {\n        if (faceCount < MIN_BARREL_FACE_COUNT) return faceExtent;\n\n        return Math.round(faceExtent / Math.sin(Math.PI / faceCount));\n    };\n\n    export const getProjectedExtent = (circumradius: number, apothem: number) => {\n        const eyeDistance = BARREL_PERSPECTIVE_PX + apothem;\n        const tangentDistanceSquared = eyeDistance * eyeDistance - circumradius * circumradius;\n\n        if (tangentDistanceSquared <= 0) return circumradius * 2;\n\n        return (2 * BARREL_PERSPECTIVE_PX * circumradius) / Math.sqrt(tangentDistanceSquared);\n    };\n\n    export const getGirth = (faceExtent: number, faceCount: number) =>\n        getProjectedExtent(getCircumdiameter(faceExtent, faceCount) * HALF, getApothem(faceExtent, faceCount));\n\n    export const getFaceTransform = (\n        axis: BarrelAxis,\n        face: BarrelFace,\n        angle: number,\n        index: number,\n        faceCount: number,\n        apothem: number,\n    ) => {\n        const rotate = axis === \"row\" ? \"rotateY\" : \"rotateX\";\n        const faceAngle = -angle - RotationUtils.getStepAngle(faceCount) * index;\n        const flip = face === \"back\" ? ` ${rotate}(${HALF_TURN_DEG}deg)` : \"\";\n\n        return `${rotate}(${faceAngle}deg) translateZ(${apothem}px)${flip}`;\n    };\n}\n"],"mappings":";;AAKA,IAAM,wBAAwB;AAC9B,IAAM,wBAAwB;AAC9B,IAAM,gBAAgB;AACtB,IAAM,OAAO;AAEb,IAAa,wBAAwB;AAE9B,IAAU;CAAV,SAAA,cAAA;CACU,aAAA,iBAAiB,UAAkB,SAC5C,SAAS,QAAQ,SAAS,QAAQ,SAAS;CAElC,aAAA,eAAe,cAAsB,aAAa;CAExD,MAAM,aAAA,aAAA,cAAc,YAAoB,cAAsB;EACjE,IAAI,YAAY,uBAAuB,OAAO;EAE9C,MAAM,mBAAmB,KAAK,IAAI,KAAK,KAAK,SAAS;EAErD,IAAI,CAAC,OAAO,SAAS,gBAAgB,KAAK,oBAAoB,GAAG,OAAO;EAExE,OAAO,KAAK,MAAM,aAAa,IAAI,gBAAgB;CACvD;CAEO,MAAM,oBAAA,aAAA,qBAAqB,YAAoB,cAAsB;EACxE,IAAI,YAAY,uBAAuB,OAAO;EAE9C,OAAO,KAAK,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,SAAS,CAAC;CAChE;CAEO,MAAM,qBAAA,aAAA,sBAAsB,cAAsB,YAAoB;EACzE,MAAM,cAAc,wBAAwB;EAC5C,MAAM,yBAAyB,cAAc,cAAc,eAAe;EAE1E,IAAI,0BAA0B,GAAG,OAAO,eAAe;EAEvD,OAAQ,IAAI,wBAAwB,eAAgB,KAAK,KAAK,sBAAsB;CACxF;CAEa,aAAA,YAAY,YAAoB,cACzC,mBAAmB,kBAAkB,YAAY,SAAS,IAAI,MAAM,WAAW,YAAY,SAAS,CAAC;CAE5F,aAAA,oBACT,MACA,MACA,OACA,OACA,WACA,YACC;EACD,MAAM,SAAS,SAAS,QAAQ,YAAY;EAI5C,OAAO,GAAG,OAAO,GAHC,CAAC,QAAQ,cAAc,aAAa,SAAS,IAAI,MAGrC,kBAAkB,QAAQ,KAF3C,SAAS,SAAS,IAAI,OAAO,GAAG,cAAc,QAAQ;CAGvE;AACH,EAAA,CAAA,gBAAA,cAAA,CAAA,EAAD"}

package/dist/Abstracts/Carrier/Carrier.utils.js

@@ -0,0 +1,26 @@
+//#region src/Abstracts/Carrier/Carrier.utils.ts
+var CarrierUtils;
+(function(_CarrierUtils) {
+	_CarrierUtils.computeDropIndex = (rects, x, y, dir) => {
+		for (let index = 0; index < rects.length; index++) {
+			const rect = rects[index];
+			const middle = dir === "row" ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+			if ((dir === "row" ? x : y) < middle) return index;
+		}
+		return rects.length;
+	};
+	_CarrierUtils.computeSettledIndex = (dropIndex, fromIndex, isSameZone) => isSameZone && dropIndex > fromIndex ? dropIndex - 1 : dropIndex;
+	_CarrierUtils.computeMarkerIndex = (settledIndex, fromIndex, isSameZone) => isSameZone && settledIndex >= fromIndex ? settledIndex + 1 : settledIndex;
+	_CarrierUtils.computeMovedOrder = (order, fromIndex, toIndex) => {
+		const rest = order.filter((_unused, index) => index !== fromIndex);
+		return [
+			...rest.slice(0, toIndex),
+			order[fromIndex],
+			...rest.slice(toIndex)
+		];
+	};
+})(CarrierUtils || (CarrierUtils = {}));
+//#endregion
+export { CarrierUtils };
+
+//# sourceMappingURL=Carrier.utils.js.map

package/dist/Abstracts/Carrier/Carrier.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carrier.utils.js","names":[],"sources":["../../../src/Abstracts/Carrier/Carrier.utils.ts"],"sourcesContent":["import type { CarryDir } from \"./Carrier.types\";\r\n\r\nexport namespace CarrierUtils {\r\n    export const computeDropIndex = (rects: DOMRect[], x: number, y: number, dir: CarryDir): number => {\r\n        for (let index = 0; index < rects.length; index++) {\r\n            const rect = rects[index];\r\n            const middle = dir === \"row\" ? rect.left + rect.width / 2 : rect.top + rect.height / 2;\r\n\r\n            if ((dir === \"row\" ? x : y) < middle) return index;\r\n        }\r\n\r\n        return rects.length;\r\n    };\r\n\r\n    export const computeSettledIndex = (dropIndex: number, fromIndex: number, isSameZone: boolean) =>\r\n        isSameZone && dropIndex > fromIndex ? dropIndex - 1 : dropIndex;\r\n\r\n    export const computeMarkerIndex = (settledIndex: number, fromIndex: number, isSameZone: boolean) =>\r\n        isSameZone && settledIndex >= fromIndex ? settledIndex + 1 : settledIndex;\r\n\r\n    export const computeMovedOrder = <T>(order: T[], fromIndex: number, toIndex: number) => {\r\n        const rest = order.filter((_unused, index) => index !== fromIndex);\r\n\r\n        return [...rest.slice(0, toIndex), order[fromIndex], ...rest.slice(toIndex)];\r\n    };\r\n}\r\n"],"mappings":";AAEO,IAAU;CAAV,SAAA,eAAA;CACU,cAAA,oBAAoB,OAAkB,GAAW,GAAW,QAA0B;EAC/F,KAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,QAAQ,SAAS;GAC/C,MAAM,OAAO,MAAM;GACnB,MAAM,SAAS,QAAQ,QAAQ,KAAK,OAAO,KAAK,QAAQ,IAAI,KAAK,MAAM,KAAK,SAAS;GAErF,KAAK,QAAQ,QAAQ,IAAI,KAAK,QAAQ,OAAO;EACjD;EAEA,OAAO,MAAM;CACjB;CAEa,cAAA,uBAAuB,WAAmB,WAAmB,eACtE,cAAc,YAAY,YAAY,YAAY,IAAI;CAE7C,cAAA,sBAAsB,cAAsB,WAAmB,eACxE,cAAc,gBAAgB,YAAY,eAAe,IAAI;CAEpD,cAAA,qBAAwB,OAAY,WAAmB,YAAoB;EACpF,MAAM,OAAO,MAAM,QAAQ,SAAS,UAAU,UAAU,SAAS;EAEjE,OAAO;GAAC,GAAG,KAAK,MAAM,GAAG,OAAO;GAAG,MAAM;GAAY,GAAG,KAAK,MAAM,OAAO;EAAC;CAC/E;AACH,EAAA,CAAA,iBAAA,eAAA,CAAA,EAAD"}

package/dist/Abstracts/Carrier/CarrierStack.js

@@ -0,0 +1,160 @@
+import { LiveAnnouncer } from "../LiveAnnouncer/LiveAnnouncer.js";
+import { batch, createSignal, onCleanup } from "solid-js";
+//#region src/Abstracts/Carrier/CarrierStack.ts
+var DRAG_SLOP_PX = 4;
+var zones = [];
+var [getCarryState, setCarryState] = createSignal();
+var startSentence = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+var getGroupZones = (groupId) => zones.filter((zone) => zone.getGroupId() === groupId && !zone.getIsDisabled());
+var getAcceptingZones = (state) => getGroupZones(state.carry.groupId).filter((zone) => zone === state.from || zone.computeCanAccept(state.carry));
+var findZoneAt = (x, y, groupId) => {
+	const candidates = getGroupZones(groupId);
+	for (const element of document.elementsFromPoint(x, y)) {
+		const zone = candidates.find((candidate) => {
+			const root = candidate.getRootRef();
+			return root !== void 0 && (root === element || root.contains(element));
+		});
+		if (zone) return zone;
+	}
+};
+var CarrierStack;
+(function(_CarrierStack) {
+	_CarrierStack.registerZone = (zone) => {
+		zones.push(zone);
+		onCleanup(() => {
+			const index = zones.indexOf(zone);
+			if (index >= 0) zones.splice(index, 1);
+		});
+	};
+	_CarrierStack.getCarry = () => getCarryState()?.carry;
+	_CarrierStack.getCarryMode = () => getCarryState()?.mode;
+	_CarrierStack.getSourceZone = () => getCarryState()?.from;
+	_CarrierStack.getTargetZone = () => getCarryState()?.to;
+	_CarrierStack.getSourcePlace = () => getCarryState()?.fromPlace;
+	_CarrierStack.getTargetPlace = () => getCarryState()?.toPlace;
+	_CarrierStack.getIsTargetAllowed = () => {
+		const state = getCarryState();
+		return state === void 0 || state.to.computeIsPlaceAllowed(state.toPlace, state.carry);
+	};
+	_CarrierStack.start = (from, place, carry, mode) => {
+		const state = {
+			carry,
+			from,
+			fromPlace: place,
+			to: from,
+			toPlace: place,
+			mode
+		};
+		setCarryState(state);
+		if (mode !== "key") {
+			LiveAnnouncer.announce(`${carry.label} picked up from ${from.getLabel()}.`);
+			return;
+		}
+		LiveAnnouncer.announce(`${carry.label} picked up from ${from.getLabel()}, ${from.computePlaceLabel(place, carry)}. ${from.getKeyHint(getAcceptingZones(state).length > 1)}`);
+	};
+	const aimAtPoint = _CarrierStack.aimAtPoint = (x, y) => {
+		const state = getCarryState();
+		if (!state) return;
+		const zone = findZoneAt(x, y, state.carry.groupId);
+		if (!zone || zone !== state.from && !zone.computeCanAccept(state.carry)) return;
+		const place = zone.computePlaceAtPoint({
+			x,
+			y
+		}, state.carry);
+		if (place === void 0) return;
+		if (zone === state.to && zone.computeIsSamePlace(place, state.toPlace)) return;
+		setCarryState({
+			...state,
+			to: zone,
+			toPlace: place
+		});
+	};
+	_CarrierStack.aimAtNudge = (nudge) => {
+		const state = getCarryState();
+		if (!state) return;
+		const place = state.to.computeNudgedPlace(state.toPlace, nudge, state.carry);
+		if (place === void 0 || state.to.computeIsSamePlace(place, state.toPlace)) return;
+		setCarryState({
+			...state,
+			toPlace: place
+		});
+		LiveAnnouncer.announce(`${startSentence(state.to.computePlaceLabel(place, state.carry))} in ${state.to.getLabel()}.`);
+	};
+	_CarrierStack.aimAtNextZone = (step) => {
+		const state = getCarryState();
+		if (!state) return;
+		const accepting = getAcceptingZones(state);
+		if (accepting.length < 2) return;
+		const to = accepting[((accepting.indexOf(state.to) + step) % accepting.length + accepting.length) % accepting.length];
+		const place = to.computeEntryPlace(state.carry);
+		setCarryState({
+			...state,
+			to,
+			toPlace: place
+		});
+		LiveAnnouncer.announce(`${to.getLabel()}, ${to.computePlaceLabel(place, state.carry)}.`);
+	};
+	const end = _CarrierStack.end = (reason) => {
+		const state = getCarryState();
+		setCarryState(void 0);
+		if (!state) return;
+		if (reason === "cancel") {
+			LiveAnnouncer.announce(`${state.carry.label} returned to ${state.from.getLabel()}.`);
+			return;
+		}
+		const isSameZone = state.to === state.from;
+		if (isSameZone && state.to.computeIsSamePlace(state.toPlace, state.fromPlace)) {
+			LiveAnnouncer.announce(`${state.carry.label} left where it was.`);
+			return;
+		}
+		if (!state.to.computeIsPlaceAllowed(state.toPlace, state.carry)) {
+			LiveAnnouncer.announce(`${state.carry.label} does not fit in ${state.to.getLabel()}, returned to ${state.from.getLabel()}.`);
+			return;
+		}
+		if (isSameZone) state.to.moveAt(state.fromPlace, state.toPlace, state.carry);
+		else batch(() => {
+			state.from.takeAt(state.fromPlace, state.carry);
+			state.to.putAt(state.toPlace, state.carry, {
+				label: state.from.getLabel(),
+				place: state.fromPlace
+			});
+		});
+		LiveAnnouncer.announce(`${state.carry.label} dropped in ${state.to.getLabel()}, ${state.to.computePlaceLabel(state.toPlace, state.carry)}.`);
+	};
+	_CarrierStack.dragFromPointer = (element, e, onPickUp, onDrop) => {
+		const startX = e.clientX;
+		const startY = e.clientY;
+		let hasStarted = false;
+		const handleMove = (moveEvent) => {
+			if (moveEvent.pointerId !== e.pointerId) return;
+			if (!hasStarted) {
+				if (Math.hypot(moveEvent.clientX - startX, moveEvent.clientY - startY) < DRAG_SLOP_PX) return;
+				hasStarted = true;
+				element.setPointerCapture(e.pointerId);
+				onPickUp({
+					x: startX,
+					y: startY
+				});
+			}
+			moveEvent.preventDefault();
+			aimAtPoint(moveEvent.clientX, moveEvent.clientY);
+		};
+		const handleEnd = (endEvent) => {
+			if (endEvent.pointerId !== e.pointerId) return;
+			element.removeEventListener("pointermove", handleMove);
+			element.removeEventListener("pointerup", handleEnd);
+			element.removeEventListener("pointercancel", handleEnd);
+			if (element.hasPointerCapture(e.pointerId)) element.releasePointerCapture(e.pointerId);
+			if (!hasStarted) return;
+			onDrop?.();
+			end(endEvent.type === "pointercancel" ? "cancel" : "drop");
+		};
+		element.addEventListener("pointermove", handleMove);
+		element.addEventListener("pointerup", handleEnd);
+		element.addEventListener("pointercancel", handleEnd);
+	};
+})(CarrierStack || (CarrierStack = {}));
+//#endregion
+export { CarrierStack };
+
+//# sourceMappingURL=CarrierStack.js.map