@kuckit/landing-module 4.0.5 → 5.0.1

package/dist/client/components/ui/glare-card.js

@@ -0,0 +1,375 @@
+import { cn } from "./utils.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/ui/glare-card.tsx
+const GlareCard = ({ children, className, expandable = true, variant = "default" }) => {
+	const isPointerInside = useRef(false);
+	const refElement = useRef(null);
+	const cardRef = useRef(null);
+	const [isExpanded, setIsExpanded] = useState(false);
+	const [hasPopped, setHasPopped] = useState(false);
+	const [isAnimating, setIsAnimating] = useState(false);
+	const state = useRef({
+		glare: {
+			x: 50,
+			y: 50
+		},
+		background: {
+			x: 50,
+			y: 50
+		},
+		rotate: {
+			x: 0,
+			y: 0
+		},
+		pointerFromCenter: 0
+	});
+	const variantColors = {
+		default: {
+			"--holo-1": "hsl(330, 85%, 65%)",
+			"--holo-2": "hsl(280, 75%, 60%)",
+			"--holo-3": "hsl(220, 85%, 60%)",
+			"--holo-4": "hsl(185, 80%, 55%)",
+			"--holo-5": "hsl(160, 75%, 50%)",
+			"--holo-6": "hsl(45, 90%, 60%)",
+			"--holo-7": "hsl(25, 90%, 60%)",
+			"--holo-8": "hsl(5, 80%, 60%)",
+			"--glow-color": "rgba(139, 92, 246, 0.4)"
+		},
+		cosmic: {
+			"--holo-1": "hsl(270, 90%, 70%)",
+			"--holo-2": "hsl(240, 85%, 65%)",
+			"--holo-3": "hsl(200, 90%, 60%)",
+			"--holo-4": "hsl(180, 85%, 55%)",
+			"--holo-5": "hsl(300, 80%, 65%)",
+			"--holo-6": "hsl(320, 85%, 70%)",
+			"--holo-7": "hsl(260, 90%, 68%)",
+			"--holo-8": "hsl(220, 85%, 62%)",
+			"--glow-color": "rgba(147, 51, 234, 0.5)"
+		},
+		aurora: {
+			"--holo-1": "hsl(160, 85%, 55%)",
+			"--holo-2": "hsl(180, 80%, 50%)",
+			"--holo-3": "hsl(200, 85%, 55%)",
+			"--holo-4": "hsl(280, 75%, 60%)",
+			"--holo-5": "hsl(320, 80%, 65%)",
+			"--holo-6": "hsl(140, 75%, 50%)",
+			"--holo-7": "hsl(170, 85%, 52%)",
+			"--holo-8": "hsl(190, 80%, 55%)",
+			"--glow-color": "rgba(34, 211, 238, 0.4)"
+		}
+	};
+	const containerStyle = {
+		"--m-x": "50%",
+		"--m-y": "50%",
+		"--r-x": "0deg",
+		"--r-y": "0deg",
+		"--bg-x": "50%",
+		"--bg-y": "50%",
+		"--duration": "400ms",
+		"--opacity": "0",
+		"--radius": "20px",
+		"--easing": "cubic-bezier(0.16, 1, 0.3, 1)",
+		"--pointer-from-center": "0",
+		"--scale": "1",
+		"--translate-x": "0px",
+		"--translate-y": "0px",
+		"--translate-z": "0px",
+		"--rotate-delta": "0deg",
+		...variantColors[variant]
+	};
+	const updateStyles = () => {
+		if (refElement.current) {
+			const { background, rotate, glare, pointerFromCenter } = state.current;
+			refElement.current.style.setProperty("--m-x", `${glare.x}%`);
+			refElement.current.style.setProperty("--m-y", `${glare.y}%`);
+			refElement.current.style.setProperty("--r-x", `${rotate.x}deg`);
+			refElement.current.style.setProperty("--r-y", `${rotate.y}deg`);
+			refElement.current.style.setProperty("--bg-x", `${background.x}%`);
+			refElement.current.style.setProperty("--bg-y", `${background.y}%`);
+			refElement.current.style.setProperty("--pointer-from-center", `${pointerFromCenter}`);
+		}
+	};
+	const expand = useCallback(() => {
+		if (!cardRef.current || !refElement.current || isAnimating) return;
+		setIsAnimating(true);
+		const rect = cardRef.current.getBoundingClientRect();
+		const deltaX = window.innerWidth / 2 - rect.left - rect.width / 2;
+		const deltaY = window.innerHeight / 2 - rect.top - rect.height / 2;
+		const scaleW = window.innerWidth / rect.width * .82;
+		const scaleH = window.innerHeight / rect.height * .82;
+		const targetScale = Math.min(scaleW, scaleH, 1.85);
+		refElement.current.style.setProperty("--scale", `${targetScale}`);
+		refElement.current.style.setProperty("--translate-x", `${deltaX}px`);
+		refElement.current.style.setProperty("--translate-y", `${deltaY}px`);
+		refElement.current.style.setProperty("--translate-z", `${targetScale * 120}px`);
+		if (!hasPopped) {
+			refElement.current.style.setProperty("--rotate-delta", "360deg");
+			setHasPopped(true);
+		}
+		refElement.current.style.setProperty("--opacity", "1");
+		setTimeout(() => {
+			refElement.current?.style.setProperty("--duration", "0s");
+			setIsAnimating(false);
+		}, 600);
+		setIsExpanded(true);
+	}, [hasPopped, isAnimating]);
+	const collapse = useCallback(() => {
+		if (!refElement.current || isAnimating) return;
+		setIsAnimating(true);
+		refElement.current.style.setProperty("--duration", "500ms");
+		refElement.current.style.setProperty("--scale", "1");
+		refElement.current.style.setProperty("--translate-x", "0px");
+		refElement.current.style.setProperty("--translate-y", "0px");
+		refElement.current.style.setProperty("--translate-z", "0px");
+		refElement.current.style.setProperty("--rotate-delta", "0deg");
+		setTimeout(() => setIsAnimating(false), 500);
+		setIsExpanded(false);
+	}, [isAnimating]);
+	const handleClick = useCallback((e) => {
+		if (!expandable || isAnimating) return;
+		e.stopPropagation();
+		if (isExpanded) collapse();
+		else expand();
+	}, [
+		expandable,
+		isExpanded,
+		expand,
+		collapse,
+		isAnimating
+	]);
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape" && isExpanded && !isAnimating) collapse();
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		isExpanded,
+		collapse,
+		isAnimating
+	]);
+	useEffect(() => {
+		if (!isExpanded) return;
+		const handleClickOutside = (e) => {
+			if (cardRef.current && !cardRef.current.contains(e.target) && !isAnimating) collapse();
+		};
+		const timer = setTimeout(() => {
+			window.addEventListener("click", handleClickOutside);
+		}, 150);
+		return () => {
+			clearTimeout(timer);
+			window.removeEventListener("click", handleClickOutside);
+		};
+	}, [
+		isExpanded,
+		collapse,
+		isAnimating
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: cn("fixed inset-0 z-40 transition-all duration-700", isExpanded ? "opacity-100 backdrop-blur-md bg-black/70" : "opacity-0 pointer-events-none backdrop-blur-none bg-transparent"),
+			style: { background: isExpanded ? `
+							radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(0,0,0,0.85) 100%),
+							linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.8))
+						` : "transparent" },
+			onClick: collapse
+		}),
+		/* @__PURE__ */ jsx("div", {
+			style: containerStyle,
+			className: cn("group relative isolate [contain:layout_style] [perspective:1200px]", "transition-[transform,z-index] duration-[var(--duration)] ease-[var(--easing)]", "will-change-transform w-full max-w-md", expandable && "cursor-pointer", isExpanded && "z-50"),
+			ref: refElement,
+			onClick: handleClick,
+			onPointerMove: (event) => {
+				const rotateFactor = isExpanded ? .25 : .45;
+				const rect = event.currentTarget.getBoundingClientRect();
+				const position = {
+					x: event.clientX - rect.left,
+					y: event.clientY - rect.top
+				};
+				const percentage = {
+					x: Math.max(0, Math.min(100, 100 / rect.width * position.x)),
+					y: Math.max(0, Math.min(100, 100 / rect.height * position.y))
+				};
+				const delta = {
+					x: percentage.x - 50,
+					y: percentage.y - 50
+				};
+				const pointerFromCenter = Math.min(1, Math.sqrt(delta.x * delta.x + delta.y * delta.y) / 50);
+				const { background, rotate, glare } = state.current;
+				background.x = 50 + percentage.x / 4 - 12.5;
+				background.y = 50 + percentage.y / 3 - 16.67;
+				rotate.x = -(delta.x / 3.5) * rotateFactor;
+				rotate.y = delta.y / 2 * rotateFactor;
+				glare.x = percentage.x;
+				glare.y = percentage.y;
+				state.current.pointerFromCenter = pointerFromCenter;
+				updateStyles();
+			},
+			onPointerEnter: () => {
+				isPointerInside.current = true;
+				if (refElement.current) setTimeout(() => {
+					if (isPointerInside.current) refElement.current?.style.setProperty("--duration", "0s");
+				}, 400);
+			},
+			onPointerLeave: () => {
+				isPointerInside.current = false;
+				if (refElement.current && !isExpanded) {
+					refElement.current.style.setProperty("--duration", "400ms");
+					refElement.current.style.setProperty("--r-x", "0deg");
+					refElement.current.style.setProperty("--r-y", "0deg");
+					refElement.current.style.setProperty("--pointer-from-center", "0");
+				}
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: cardRef,
+				className: cn("h-full grid will-change-transform origin-center", "transition-all duration-[var(--duration)] ease-[var(--easing)]", "[transform-style:preserve-3d]", "rounded-[var(--radius)]", "overflow-hidden", "hover:[--opacity:1]"),
+				style: {
+					transform: `
+							translate3d(var(--translate-x), var(--translate-y), var(--translate-z))
+							scale(var(--scale))
+							rotateY(calc(var(--r-x) + var(--rotate-delta)))
+							rotateX(var(--r-y))
+						`,
+					boxShadow: isExpanded ? `
+								0 0 0 1px rgba(255,255,255,0.15),
+								0 0 20px 0 var(--glow-color),
+								0 0 60px -10px var(--glow-color),
+								0 30px 60px -15px rgba(0,0,0,0.5),
+								0 50px 100px -30px rgba(0,0,0,0.6)
+							` : `
+								0 1px 2px rgba(0,0,0,0.02),
+								0 2px 4px rgba(0,0,0,0.03),
+								0 4px 8px rgba(0,0,0,0.04),
+								0 8px 16px rgba(0,0,0,0.05),
+								0 16px 32px rgba(0,0,0,0.06),
+								0 32px 64px rgba(0,0,0,0.07)
+							`
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "w-full h-full grid [grid-area:1/1] [clip-path:inset(0_0_0_0_round_var(--radius))]",
+						children: /* @__PURE__ */ jsx("div", {
+							className: cn("h-full w-full relative bg-card", className),
+							children
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "w-full h-full grid [grid-area:1/1] pointer-events-none [clip-path:inset(0_0_0_0_round_var(--radius))] mix-blend-overlay",
+						style: {
+							background: `
+								linear-gradient(
+									135deg,
+									transparent 0%,
+									rgba(255,255,255,0.03) 50%,
+									transparent 100%
+								)
+							`,
+							backgroundSize: "200% 200%",
+							animation: "shimmer 8s ease-in-out infinite",
+							opacity: .5
+						}
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "w-full h-full grid [grid-area:1/1] pointer-events-none [clip-path:inset(0_0_0_0_round_var(--radius))] opacity-[var(--opacity)] transition-opacity duration-500 mix-blend-color-dodge",
+						style: {
+							backgroundImage: `
+								repeating-linear-gradient(
+									127deg,
+									var(--holo-1) 0%,
+									var(--holo-2) 2.5%,
+									var(--holo-3) 5%,
+									var(--holo-4) 7.5%,
+									var(--holo-5) 10%,
+									var(--holo-6) 12.5%,
+									var(--holo-7) 15%,
+									var(--holo-8) 17.5%,
+									var(--holo-1) 20%
+								)
+							`,
+							backgroundSize: "400% 400%",
+							backgroundPosition: "var(--bg-x) var(--bg-y)",
+							filter: `brightness(${isExpanded ? .75 : .65}) saturate(${isExpanded ? 2 : 1.6}) contrast(1.15)`,
+							opacity: isExpanded ? .28 : .2
+						}
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "w-full h-full grid [grid-area:1/1] pointer-events-none [clip-path:inset(0_0_0_0_round_var(--radius))] opacity-[var(--opacity)] transition-opacity duration-300 mix-blend-overlay",
+						style: {
+							background: `
+								conic-gradient(
+									from 210deg at var(--m-x) var(--m-y),
+									var(--holo-1) 0deg,
+									var(--holo-2) 45deg,
+									var(--holo-3) 90deg,
+									var(--holo-4) 135deg,
+									var(--holo-5) 180deg,
+									var(--holo-6) 225deg,
+									var(--holo-7) 270deg,
+									var(--holo-8) 315deg,
+									var(--holo-1) 360deg
+								)
+							`,
+							filter: `brightness(${isExpanded ? 1.4 : 1.2}) saturate(0.65)`,
+							opacity: isExpanded ? .38 : .28
+						}
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "w-full h-full grid [grid-area:1/1] pointer-events-none [clip-path:inset(0_0_0_0_round_var(--radius))] opacity-[var(--opacity)] transition-opacity duration-100 mix-blend-overlay",
+						style: {
+							background: `
+								radial-gradient(
+									farthest-corner circle at var(--m-x) var(--m-y),
+									rgba(255, 255, 255, 1) 0%,
+									rgba(255, 255, 255, 0.85) 8%,
+									rgba(255, 255, 255, 0.5) 20%,
+									transparent 55%
+								)
+							`,
+							filter: `brightness(${isExpanded ? 1.5 : 1.25})`
+						}
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cn("absolute inset-0 rounded-[var(--radius)] pointer-events-none transition-all duration-300", isExpanded ? "opacity-100" : "opacity-[var(--opacity)]"),
+						style: { boxShadow: `
+								inset 0 0 0 1px rgba(255, 255, 255, ${isExpanded ? .18 : .1}),
+								inset 0 1px 0 0 rgba(255, 255, 255, ${isExpanded ? .22 : .12}),
+								inset 0 -1px 0 0 rgba(0, 0, 0, ${isExpanded ? .12 : .08})
+							` }
+					}),
+					isExpanded && /* @__PURE__ */ jsx("div", {
+						className: "absolute top-5 right-5 z-10 pointer-events-none",
+						style: { animation: "fadeInUp 0.4s ease-out 0.3s both" },
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-sm border border-white/20",
+							children: [/* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-white/60 animate-pulse" }), /* @__PURE__ */ jsx("span", {
+								className: "text-white/70 text-[10px] font-medium tracking-widest uppercase",
+								children: "Click to close"
+							})]
+						})
+					})
+				]
+			})
+		}),
+		/* @__PURE__ */ jsx("style", { children: `
+				@keyframes shimmer {
+					0%, 100% { background-position: 200% 200%; }
+					50% { background-position: 0% 0%; }
+				}
+				@keyframes fadeInUp {
+					from {
+						opacity: 0;
+						transform: translateY(8px);
+					}
+					to {
+						opacity: 1;
+						transform: translateY(0);
+					}
+				}
+			` })
+	] });
+};
+
+//#endregion
+export { GlareCard };

package/dist/client/components/ui/utils.js

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/client/components/ui/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { cn };

package/dist/client/index.d.ts

@@ -1,12 +1,7 @@
+import { LandingPage } from "./components/LandingPage.js";
+import { ModulesPage } from "./components/ModulesPage.js";
 import { KuckitClientModuleContext } from "@kuckit/sdk-react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
-//#region src/client/components/LandingPage.d.ts
-declare function LandingPage(): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/client/components/ModulesPage.d.ts
-declare function ModulesPage(): react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/client/index.d.ts
 declare const kuckitClientModule: {
   id: string;
@@ -15,5 +10,4 @@ declare const kuckitClientModule: {
   register(ctx: KuckitClientModuleContext): void;
 };
 //#endregion
-export { LandingPage, ModulesPage, kuckitClientModule };
-//# sourceMappingURL=index.d.ts.map
+export { LandingPage, ModulesPage, kuckitClientModule };