@goodz-core/sdk 0.1.0 → 0.3.0

package/dist/chunk-K6IFJWLB.js

@@ -0,0 +1,924 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/ui/GoodZCardFocus.tsx
+
+// src/ui/form-factors.ts
+var FORM_FACTORS = {
+  trading_card: { key: "trading_card", label: "Trading Card", aspectRatio: [5, 7], isCircle: false },
+  postcard: { key: "postcard", label: "Postcard", aspectRatio: [3, 2], isCircle: false },
+  postcard_portrait: { key: "postcard_portrait", label: "Postcard (Portrait)", aspectRatio: [2, 3], isCircle: false },
+  polaroid: { key: "polaroid", label: "Polaroid", aspectRatio: [3, 4], isCircle: false },
+  laser_ticket: { key: "laser_ticket", label: "Laser Ticket", aspectRatio: [5, 2], isCircle: false },
+  badge_small: { key: "badge_small", label: "Badge S", aspectRatio: [1, 1], isCircle: true },
+  badge_medium: { key: "badge_medium", label: "Badge M", aspectRatio: [1, 1], isCircle: true },
+  badge_large: { key: "badge_large", label: "Badge L", aspectRatio: [1, 1], isCircle: true },
+  acrylic_stand_tall: { key: "acrylic_stand_tall", label: "Transparent Card", aspectRatio: [5, 7], isCircle: false, isTransparent: true },
+  acrylic_stand_chibi: { key: "acrylic_stand_chibi", label: "Transparent Card (Chibi)", aspectRatio: [3, 4], isCircle: false, isTransparent: true }
+};
+function getFormFactorSpec(key) {
+  return FORM_FACTORS[key];
+}
+function getAspectRatioCSS(key) {
+  const spec = getFormFactorSpec(key);
+  if (!spec) return "5 / 7";
+  return `${spec.aspectRatio[0]} / ${spec.aspectRatio[1]}`;
+}
+function getHoloTier(rarity) {
+  if (!rarity) return "subtle";
+  const r = rarity.toUpperCase();
+  if (["UR", "SECRET", "RAINBOW", "GOLD", "PRISMATIC"].some((k) => r.includes(k))) return "rainbow";
+  if (["SSR", "SR", "RARE", "HOLO", "LEGENDARY", "MYTHIC"].some((k) => r.includes(k))) return "holo";
+  return "subtle";
+}
+function getHoloGradient(tier, angle) {
+  switch (tier) {
+    case "subtle":
+      return `linear-gradient(${angle}deg, transparent 0%, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 70%, transparent 100%)`;
+    case "holo":
+      return `linear-gradient(${angle}deg, transparent 0%, rgba(120,200,255,0.1) 15%, rgba(255,180,120,0.12) 30%, rgba(180,120,255,0.15) 50%, rgba(120,255,200,0.12) 70%, rgba(255,120,180,0.1) 85%, transparent 100%)`;
+    case "rainbow":
+      return `linear-gradient(${angle}deg, rgba(255,0,0,0.1) 0%, rgba(255,165,0,0.12) 14%, rgba(255,255,0,0.12) 28%, rgba(0,255,0,0.12) 42%, rgba(0,127,255,0.15) 56%, rgba(75,0,130,0.12) 70%, rgba(148,0,211,0.12) 84%, rgba(255,0,0,0.1) 100%)`;
+    default:
+      return "none";
+  }
+}
+function isBadge(ff) {
+  return ff === "badge_small" || ff === "badge_medium" || ff === "badge_large";
+}
+function isAcrylic(ff) {
+  return ff === "acrylic_stand_tall" || ff === "acrylic_stand_chibi";
+}
+function isPolaroid(ff) {
+  return ff === "polaroid";
+}
+function isLaserTicket(ff) {
+  return ff === "laser_ticket";
+}
+function isPostcard(ff) {
+  return ff === "postcard" || ff === "postcard_portrait";
+}
+function isMobileDevice() {
+  return typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0 || /Android|iPhone|iPad|iPod/i.test(navigator.userAgent));
+}
+function getBadgeContainerStyle() {
+  return {
+    borderRadius: "50%",
+    overflow: "hidden",
+    boxShadow: [
+      "0 0 0 4px rgba(180,180,200,0.8)",
+      "0 0 0 6px rgba(120,120,140,0.6)",
+      "inset 0 -4px 12px rgba(0,0,0,0.25)",
+      "inset 0 4px 8px rgba(255,255,255,0.2)",
+      "0 8px 24px rgba(0,0,0,0.4)"
+    ].join(", ")
+  };
+}
+function getBadgeOverlayStyle(tiltX, tiltY) {
+  const px = 50 + tiltY * 2;
+  const py = 40 - tiltX * 1.5;
+  return {
+    background: `radial-gradient(ellipse at ${px}% ${py}%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 40%, transparent 70%)`,
+    borderRadius: "50%",
+    mixBlendMode: "overlay"
+  };
+}
+function getPolaroidContainerStyle() {
+  return {
+    padding: "10px 10px 40px 10px",
+    backgroundColor: "#fafaf8",
+    borderRadius: "2px",
+    boxShadow: [
+      "0 2px 8px rgba(0,0,0,0.15)",
+      "0 8px 24px rgba(0,0,0,0.1)",
+      "2px 4px 6px rgba(0,0,0,0.08)"
+    ].join(", "),
+    backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E")`
+  };
+}
+function getLaserTicketOverlayStyle(angle) {
+  return {
+    background: `linear-gradient(${angle}deg, 
+      rgba(255,0,0,0.15) 0%, rgba(255,165,0,0.18) 10%, rgba(255,255,0,0.18) 20%, 
+      rgba(0,255,0,0.18) 30%, rgba(0,200,255,0.2) 40%, rgba(0,100,255,0.2) 50%, 
+      rgba(75,0,130,0.18) 60%, rgba(148,0,211,0.18) 70%, rgba(255,0,100,0.15) 80%, 
+      rgba(255,100,0,0.15) 90%, rgba(255,0,0,0.15) 100%)`,
+    mixBlendMode: "color-dodge",
+    animation: "goodz-laser-shimmer 3s linear infinite"
+  };
+}
+function getAcrylicContainerStyle() {
+  return {
+    borderRadius: "16px",
+    overflow: "visible",
+    boxShadow: [
+      "inset 0 0 0 1px rgba(255,255,255,0.12)",
+      "inset 0 1px 0 0 rgba(255,255,255,0.2)",
+      "0 4px 8px -2px rgba(0,0,0,0.3)",
+      "0 12px 24px -4px rgba(0,0,0,0.4)",
+      "0 25px 50px -12px rgba(0,0,0,0.5)"
+    ].join(", "),
+    background: "linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)"
+  };
+}
+function getAcrylicOverlayStyle(tiltX, tiltY) {
+  const px = 50 + tiltY * 1.5;
+  const py = 30 - tiltX * 1.5;
+  const edgePx = 50 - tiltY * 3;
+  const edgePy = 50 + tiltX * 3;
+  return {
+    background: [
+      `radial-gradient(ellipse at ${px}% ${py}%, rgba(255,255,255,0.2) 0%, transparent 50%)`,
+      `radial-gradient(ellipse at ${edgePx}% ${edgePy}%, rgba(200,220,255,0.08) 0%, transparent 40%)`,
+      `linear-gradient(${(Math.atan2(tiltY, tiltX) * 180 / Math.PI + 360) % 360}deg, transparent 30%, rgba(255,200,200,0.04) 40%, rgba(200,255,200,0.04) 50%, rgba(200,200,255,0.04) 60%, transparent 70%)`
+    ].join(", "),
+    mixBlendMode: "screen",
+    borderRadius: "16px",
+    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.08)"
+  };
+}
+function getPostcardOverlayStyle() {
+  return {
+    backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E")`,
+    mixBlendMode: "multiply"
+  };
+}
+var KEYFRAMES_ID = "__goodz-card-focus-keyframes__";
+function injectKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(KEYFRAMES_ID)) return;
+  const style = document.createElement("style");
+  style.id = KEYFRAMES_ID;
+  style.textContent = `
+    @keyframes goodz-focus-shimmer {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
+    }
+    @keyframes goodz-focus-pulse {
+      0%, 100% { opacity: 0.4; }
+      50% { opacity: 1; }
+    }
+    @keyframes goodz-laser-shimmer {
+      0% { filter: hue-rotate(0deg) brightness(1); }
+      50% { filter: hue-rotate(30deg) brightness(1.1); }
+      100% { filter: hue-rotate(0deg) brightness(1); }
+    }
+  `;
+  document.head.appendChild(style);
+}
+function GoodZCardFocus({
+  children,
+  imageUrl,
+  cardName = "GoodZ",
+  rarity,
+  formFactor,
+  className = "",
+  disabled = false
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const handleOpen = useCallback(() => {
+    if (!disabled) {
+      setIsClosing(false);
+      setIsOpen(true);
+    }
+  }, [disabled]);
+  const handleClose = useCallback(() => {
+    setIsClosing(true);
+  }, []);
+  const handleExitDone = useCallback(() => {
+    setIsOpen(false);
+    setIsClosing(false);
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: className || void 0,
+        style: {
+          cursor: disabled ? "default" : "pointer",
+          transition: "transform 0.3s",
+          ...!className ? {} : {}
+        },
+        onClick: handleOpen,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") handleOpen();
+        },
+        "aria-label": `View ${cardName} in detail`,
+        children
+      }
+    ),
+    isOpen && createPortal(
+      /* @__PURE__ */ jsx(
+        FocusOverlay,
+        {
+          imageUrl,
+          cardName,
+          rarity,
+          formFactor,
+          onClose: handleClose,
+          closing: isClosing,
+          onExitDone: handleExitDone
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function FocusOverlay({ imageUrl, cardName, rarity, formFactor, onClose, closing, onExitDone }) {
+  const overlayRef = useRef(null);
+  const cardRef = useRef(null);
+  const holoRef = useRef(null);
+  const sparkleRef = useRef(null);
+  const materialRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [gyroStatus, setGyroStatus] = useState("checking");
+  const [useGyro, setUseGyro] = useState(true);
+  const [showHint, setShowHint] = useState(true);
+  const tier = getHoloTier(rarity);
+  const isMobile = useRef(isMobileDevice()).current;
+  const tiltRef = useRef({ x: 0, y: 0 });
+  const targetTiltRef = useRef({ x: 0, y: 0 });
+  const gyroListenerRef = useRef(null);
+  const touchStartRef = useRef(null);
+  const lerpRafRef = useRef(null);
+  const rafRef = useRef(null);
+  const entryDoneRef = useRef(false);
+  const lerpActiveRef = useRef(false);
+  const ff = formFactor || "trading_card";
+  const useBadgeMaterial = isBadge(ff);
+  const useAcrylicMaterial = isAcrylic(ff);
+  const usePolaroidMaterial = isPolaroid(ff);
+  const useLaserMaterial = isLaserTicket(ff);
+  const usePostcardMaterial = isPostcard(ff);
+  const useDefaultHolo = !useBadgeMaterial && !useAcrylicMaterial && !usePolaroidMaterial && !useLaserMaterial && !usePostcardMaterial;
+  useEffect(() => {
+    injectKeyframes();
+  }, []);
+  useEffect(() => {
+    const scrollY = window.scrollY;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    const prevOverflow = document.body.style.overflow;
+    const prevPosition = document.body.style.position;
+    const prevTop = document.body.style.top;
+    const prevWidth = document.body.style.width;
+    const prevPaddingRight = document.body.style.paddingRight;
+    document.body.style.overflow = "hidden";
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.width = "100%";
+    if (scrollbarWidth > 0) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+    setVisible(true);
+    const hintTimer = setTimeout(() => setShowHint(false), 3e3);
+    const entryTimer = setTimeout(() => {
+      entryDoneRef.current = true;
+      if (cardRef.current) {
+        cardRef.current.style.transition = "none";
+      }
+    }, 500);
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      document.body.style.position = prevPosition;
+      document.body.style.top = prevTop;
+      document.body.style.width = prevWidth;
+      document.body.style.paddingRight = prevPaddingRight;
+      window.scrollTo(0, scrollY);
+      clearTimeout(hintTimer);
+      clearTimeout(entryTimer);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    if (!closing) return;
+    setVisible(false);
+    if (holoRef.current) {
+      holoRef.current.style.transition = "opacity 0.08s ease";
+      holoRef.current.style.opacity = "0";
+    }
+    if (sparkleRef.current) {
+      sparkleRef.current.style.transition = "opacity 0.08s ease";
+      sparkleRef.current.style.opacity = "0";
+    }
+    if (materialRef.current) {
+      materialRef.current.style.transition = "opacity 0.08s ease";
+      materialRef.current.style.opacity = "0";
+    }
+    const cardTimer = setTimeout(() => {
+      if (cardRef.current) {
+        cardRef.current.style.transition = "opacity 0.2s ease, transform 0.25s cubic-bezier(.4,0,.2,1)";
+        cardRef.current.style.opacity = "0";
+        cardRef.current.style.transform = "perspective(800px) rotateX(0deg) rotateY(0deg) scale(0.85)";
+      }
+    }, 80);
+    const bgTimer = setTimeout(() => {
+      if (overlayRef.current) {
+        overlayRef.current.style.transition = "background-color 0.25s ease, backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease";
+        overlayRef.current.style.backgroundColor = "rgba(0,0,0,0)";
+        overlayRef.current.style.backdropFilter = "blur(0px)";
+        overlayRef.current.style.WebkitBackdropFilter = "blur(0px)";
+      }
+    }, 120);
+    const exitTimer = setTimeout(() => {
+      onExitDone?.();
+    }, 400);
+    return () => {
+      clearTimeout(cardTimer);
+      clearTimeout(bgTimer);
+      clearTimeout(exitTimer);
+    };
+  }, [closing, onExitDone]);
+  useEffect(() => {
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+    const preventScroll = (e) => {
+      const target = e.target;
+      if (target === overlay || target.closest("[data-overlay-bg]")) {
+        e.preventDefault();
+      }
+    };
+    overlay.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      overlay.removeEventListener("touchmove", preventScroll);
+    };
+  }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+  const updateMaterialOverlay = useCallback((tiltX, tiltY) => {
+    if (!materialRef.current) return;
+    if (useBadgeMaterial) {
+      materialRef.current.style.background = getBadgeOverlayStyle(tiltX, tiltY).background;
+    } else if (useAcrylicMaterial) {
+      materialRef.current.style.background = getAcrylicOverlayStyle(tiltX, tiltY).background;
+    }
+  }, [useBadgeMaterial, useAcrylicMaterial]);
+  const applyTilt = useCallback((tiltX, tiltY) => {
+    if (!cardRef.current) return;
+    const maxAngle = isMobile ? 14 : 20;
+    const rx = Math.max(-maxAngle, Math.min(maxAngle, tiltX));
+    const ry = Math.max(-maxAngle, Math.min(maxAngle, tiltY));
+    tiltRef.current = { x: rx, y: ry };
+    cardRef.current.style.transform = `perspective(800px) rotateX(${rx}deg) rotateY(${ry}deg)`;
+    const angle = (Math.atan2(ry, rx) * 180 / Math.PI + 360) % 360;
+    if (holoRef.current && (useDefaultHolo || useLaserMaterial)) {
+      if (useLaserMaterial) {
+        holoRef.current.style.background = getLaserTicketOverlayStyle(angle).background;
+      } else {
+        holoRef.current.style.background = getHoloGradient(tier, angle);
+      }
+    }
+    if (sparkleRef.current && useDefaultHolo) {
+      const px = 50 + ry * 2;
+      const py = 50 - rx * 2;
+      const opacity = tier === "rainbow" ? 0.25 : tier === "holo" ? 0.18 : 0.1;
+      sparkleRef.current.style.background = `radial-gradient(circle at ${px}% ${py}%, rgba(255,255,255,${opacity}) 0%, transparent 60%)`;
+    }
+    updateMaterialOverlay(rx, ry);
+  }, [isMobile, tier, useDefaultHolo, useLaserMaterial, updateMaterialOverlay]);
+  const scheduleTilt = useCallback((tiltX, tiltY) => {
+    if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(() => {
+      applyTilt(tiltX, tiltY);
+      rafRef.current = null;
+    });
+  }, [applyTilt]);
+  const LERP_FACTOR = 0.08;
+  const LERP_THRESHOLD = 0.01;
+  const startLerpLoop = useCallback(() => {
+    if (lerpActiveRef.current) return;
+    lerpActiveRef.current = true;
+    const loop = () => {
+      const cur = tiltRef.current;
+      const tgt = targetTiltRef.current;
+      const dx = tgt.x - cur.x;
+      const dy = tgt.y - cur.y;
+      if (Math.abs(dx) < LERP_THRESHOLD && Math.abs(dy) < LERP_THRESHOLD) {
+        if (cur.x !== tgt.x || cur.y !== tgt.y) {
+          applyTilt(tgt.x, tgt.y);
+        }
+        lerpActiveRef.current = false;
+        lerpRafRef.current = null;
+        return;
+      }
+      const nx = cur.x + dx * LERP_FACTOR;
+      const ny = cur.y + dy * LERP_FACTOR;
+      applyTilt(nx, ny);
+      lerpRafRef.current = requestAnimationFrame(loop);
+    };
+    lerpRafRef.current = requestAnimationFrame(loop);
+  }, [applyTilt]);
+  useEffect(() => {
+    return () => {
+      if (lerpRafRef.current) cancelAnimationFrame(lerpRafRef.current);
+    };
+  }, []);
+  const resetTilt = useCallback((_animate = false) => {
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    targetTiltRef.current = { x: 0, y: 0 };
+    startLerpLoop();
+  }, [startLerpLoop]);
+  const startGyro = useCallback(() => {
+    let baseBeta = null;
+    let baseGamma = null;
+    const sensitivity = 0.7;
+    const handler = (e) => {
+      if (e.beta === null || e.gamma === null) return;
+      if (baseBeta === null) {
+        baseBeta = e.beta;
+        baseGamma = e.gamma;
+      }
+      const tiltX = -((e.beta - baseBeta) * sensitivity);
+      const tiltY = (e.gamma - (baseGamma ?? 0)) * sensitivity;
+      scheduleTilt(tiltX, tiltY);
+    };
+    window.addEventListener("deviceorientation", handler);
+    gyroListenerRef.current = handler;
+    setGyroStatus("available");
+    setUseGyro(true);
+  }, [scheduleTilt]);
+  useEffect(() => {
+    if (typeof DeviceOrientationEvent === "undefined") {
+      setGyroStatus("unavailable");
+      return;
+    }
+    if (typeof DeviceOrientationEvent.requestPermission === "function") {
+      setGyroStatus("needs-permission");
+      return;
+    }
+    let testHandler = null;
+    const testTimeout = setTimeout(() => {
+      if (testHandler) window.removeEventListener("deviceorientation", testHandler);
+      setGyroStatus("unavailable");
+    }, 1500);
+    testHandler = (e) => {
+      clearTimeout(testTimeout);
+      if (testHandler) window.removeEventListener("deviceorientation", testHandler);
+      if (e.beta !== null && e.gamma !== null) {
+        startGyro();
+      } else {
+        setGyroStatus("unavailable");
+      }
+    };
+    window.addEventListener("deviceorientation", testHandler);
+    return () => {
+      clearTimeout(testTimeout);
+      if (testHandler) window.removeEventListener("deviceorientation", testHandler);
+      if (gyroListenerRef.current) window.removeEventListener("deviceorientation", gyroListenerRef.current);
+    };
+  }, [startGyro]);
+  const requestGyroPermission = useCallback(async () => {
+    try {
+      const state = await DeviceOrientationEvent.requestPermission();
+      if (state === "granted") {
+        startGyro();
+      } else {
+        setGyroStatus("unavailable");
+      }
+    } catch {
+      setGyroStatus("unavailable");
+    }
+  }, [startGyro]);
+  const handleMouseMove = useCallback((e) => {
+    if (gyroStatus === "available" || isMobile) return;
+    const rect = cardRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    const tiltY = (e.clientX - cx) / (rect.width / 2) * 15;
+    const tiltX = -((e.clientY - cy) / (rect.height / 2)) * 15;
+    targetTiltRef.current = { x: tiltX, y: tiltY };
+    startLerpLoop();
+  }, [gyroStatus, isMobile, startLerpLoop]);
+  const handleMouseLeave = useCallback(() => {
+    if (gyroStatus === "available" || isMobile) return;
+    targetTiltRef.current = { x: 0, y: 0 };
+    startLerpLoop();
+  }, [gyroStatus, isMobile, startLerpLoop]);
+  useEffect(() => {
+    const card = cardRef.current;
+    if (!card || !isMobile || gyroStatus === "available" && useGyro) return;
+    const SENSITIVITY = 0.4;
+    const onTouchStart = (e) => {
+      const touch = e.touches[0];
+      touchStartRef.current = { x: touch.clientX, y: touch.clientY };
+    };
+    const onTouchMove = (e) => {
+      if (!touchStartRef.current) return;
+      e.preventDefault();
+      const touch = e.touches[0];
+      const dx = touch.clientX - touchStartRef.current.x;
+      const dy = touch.clientY - touchStartRef.current.y;
+      const tiltY = dx * SENSITIVITY;
+      const tiltX = -(dy * SENSITIVITY);
+      scheduleTilt(tiltX, tiltY);
+    };
+    const onTouchEnd = () => {
+      touchStartRef.current = null;
+      resetTilt(true);
+    };
+    card.addEventListener("touchstart", onTouchStart, { passive: true });
+    card.addEventListener("touchmove", onTouchMove, { passive: false });
+    card.addEventListener("touchend", onTouchEnd, { passive: true });
+    return () => {
+      card.removeEventListener("touchstart", onTouchStart);
+      card.removeEventListener("touchmove", onTouchMove);
+      card.removeEventListener("touchend", onTouchEnd);
+    };
+  }, [scheduleTilt, gyroStatus, useGyro, isMobile, resetTilt]);
+  const glareOpacity = tier === "rainbow" ? 0.4 : tier === "holo" ? 0.3 : 0.2;
+  const toggleInputMode = useCallback(() => {
+    if (gyroStatus !== "available") return;
+    const next = !useGyro;
+    setUseGyro(next);
+    if (!next) {
+      if (gyroListenerRef.current) {
+        window.removeEventListener("deviceorientation", gyroListenerRef.current);
+        gyroListenerRef.current = null;
+      }
+      resetTilt(true);
+    } else {
+      startGyro();
+    }
+  }, [gyroStatus, useGyro, resetTilt, startGyro]);
+  const hintText = gyroStatus === "available" && useGyro ? "\u{1F4F1} Tilt your phone to rotate the card" : gyroStatus === "needs-permission" ? "\u{1F4F1} Tap the button below to enable gyroscope" : isMobile ? "\u{1F446} Touch & drag the card to tilt" : "\u2728 Move to tilt the card";
+  const cardWidth = isBadge(ff) ? "min(70vw, 320px)" : isLaserTicket(ff) ? "min(90vw, 500px)" : isPostcard(ff) ? "min(85vw, 460px)" : "min(80vw, 400px)";
+  const imageContainerStyle = useBadgeMaterial ? getBadgeContainerStyle() : usePolaroidMaterial ? getPolaroidContainerStyle() : useAcrylicMaterial ? getAcrylicContainerStyle() : {
+    borderRadius: "16px",
+    overflow: "hidden",
+    boxShadow: "0 25px 50px -12px rgba(0,0,0,0.5)"
+  };
+  const imageBorderRadius = useBadgeMaterial ? "50%" : usePolaroidMaterial ? "0" : "16px";
+  const overlayBorderRadius = useBadgeMaterial ? "50%" : usePolaroidMaterial ? "2px" : "16px";
+  const overlayStyle = {
+    position: "fixed",
+    inset: 0,
+    zIndex: 9999,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(0,0,0,0.85)",
+    backdropFilter: visible ? "blur(12px)" : "blur(0px)",
+    WebkitBackdropFilter: visible ? "blur(12px)" : "blur(0px)",
+    transition: "backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease",
+    touchAction: "none",
+    overscrollBehavior: "none"
+  };
+  const closeButtonStyle = {
+    position: "absolute",
+    top: "16px",
+    right: "16px",
+    width: "48px",
+    height: "48px",
+    borderRadius: "50%",
+    background: "rgba(255,255,255,0.1)",
+    border: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    zIndex: 1e4,
+    opacity: closing ? 0 : 1,
+    transition: closing ? "opacity 0.1s ease" : "opacity 0.3s ease",
+    pointerEvents: closing ? "none" : "auto",
+    touchAction: "manipulation"
+  };
+  const toggleButtonStyle = {
+    position: "absolute",
+    bottom: "80px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    padding: "10px 20px",
+    borderRadius: "9999px",
+    background: "rgba(255,255,255,0.15)",
+    border: "none",
+    color: "white",
+    fontSize: "14px",
+    fontWeight: 500,
+    cursor: "pointer",
+    zIndex: 1e4,
+    opacity: closing ? 0 : 1,
+    transition: closing ? "opacity 0.1s ease" : "opacity 0.3s ease",
+    pointerEvents: closing ? "none" : "auto",
+    touchAction: "manipulation"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: overlayRef,
+      "data-overlay-bg": true,
+      style: overlayStyle,
+      onClick: (e) => {
+        const target = e.target;
+        if (target.closest("button") || target.closest("a")) return;
+        onClose();
+      },
+      onMouseMove: handleMouseMove,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" }, children: [
+          imageUrl && !imageLoaded && visible && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                pointerEvents: "none",
+                zIndex: 10
+              },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    width: cardWidth,
+                    aspectRatio: getAspectRatioCSS(ff),
+                    borderRadius: useBadgeMaterial ? "50%" : usePolaroidMaterial ? "4px" : "16px",
+                    overflow: "hidden",
+                    position: "relative",
+                    ...usePolaroidMaterial ? { padding: "10px 10px 40px 10px", backgroundColor: "rgba(250,250,248,0.08)" } : {}
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          background: "linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 100%)",
+                          animation: "goodz-focus-pulse 2s ease-in-out infinite"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 60%, transparent 100%)",
+                          animation: "goodz-focus-shimmer 2s ease-in-out infinite"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          borderRadius: "inherit",
+                          border: "1px solid rgba(255,255,255,0.08)"
+                        }
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: cardRef,
+              style: {
+                position: "relative",
+                userSelect: "none",
+                width: cardWidth,
+                transform: visible ? "perspective(800px) rotateX(0deg) rotateY(0deg)" : "perspective(800px) rotateX(0deg) rotateY(0deg) scale(0.8)",
+                opacity: visible && (!imageUrl || imageLoaded) ? 1 : 0,
+                transition: "opacity 0.4s cubic-bezier(.16,1,.3,1), transform 0.15s ease-out",
+                transformOrigin: "center center",
+                transformStyle: "preserve-3d",
+                willChange: "transform",
+                touchAction: "none"
+              },
+              onMouseLeave: handleMouseLeave,
+              children: [
+                /* @__PURE__ */ jsx("div", { style: { ...imageContainerStyle, position: "relative" }, children: imageUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  !imageLoaded && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        overflow: "hidden",
+                        borderRadius: usePolaroidMaterial ? "0" : imageBorderRadius,
+                        background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%)"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            position: "absolute",
+                            inset: 0,
+                            background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 60%, transparent 100%)",
+                            animation: "goodz-focus-shimmer 1.8s ease-in-out infinite"
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: imageUrl,
+                      alt: cardName,
+                      style: {
+                        width: "100%",
+                        display: "block",
+                        borderRadius: usePolaroidMaterial ? "0" : imageBorderRadius,
+                        aspectRatio: getAspectRatioCSS(ff),
+                        objectFit: "cover",
+                        opacity: imageLoaded ? 1 : 0,
+                        transition: "opacity 0.3s ease"
+                      },
+                      draggable: false,
+                      onLoad: () => setImageLoaded(true)
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      width: "100%",
+                      background: "#262626",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: "#737373",
+                      aspectRatio: getAspectRatioCSS(ff),
+                      borderRadius: imageBorderRadius
+                    },
+                    children: /* @__PURE__ */ jsx("svg", { style: { width: "64px", height: "64px" }, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 1.5,
+                        d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+                      }
+                    ) })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      pointerEvents: "none",
+                      background: useBadgeMaterial ? `radial-gradient(circle at 50% 30%, rgba(255,255,255,${glareOpacity + 0.1}) 0%, transparent 60%)` : `radial-gradient(circle at 50% 30%, rgba(255,255,255,${glareOpacity}) 0%, transparent 70%)`,
+                      mixBlendMode: "overlay",
+                      borderRadius: overlayBorderRadius,
+                      ...usePolaroidMaterial ? { top: "10px", left: "10px", right: "10px", bottom: "40px" } : {}
+                    }
+                  }
+                ),
+                (useDefaultHolo || useLaserMaterial) && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: holoRef,
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      pointerEvents: "none",
+                      background: useLaserMaterial ? getLaserTicketOverlayStyle(125).background : getHoloGradient(tier, 125),
+                      mixBlendMode: useLaserMaterial ? "color-dodge" : tier === "subtle" ? "overlay" : "color-dodge",
+                      borderRadius: overlayBorderRadius,
+                      ...useLaserMaterial ? { animation: "goodz-laser-shimmer 3s linear infinite" } : {}
+                    }
+                  }
+                ),
+                useDefaultHolo && (tier === "holo" || tier === "rainbow") && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: sparkleRef,
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      pointerEvents: "none",
+                      background: "none",
+                      mixBlendMode: "overlay",
+                      borderRadius: overlayBorderRadius
+                    }
+                  }
+                ),
+                (useBadgeMaterial || useAcrylicMaterial || usePostcardMaterial) && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: materialRef,
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      pointerEvents: "none",
+                      ...useBadgeMaterial ? getBadgeOverlayStyle(0, 0) : {},
+                      ...useAcrylicMaterial ? getAcrylicOverlayStyle(0, 0) : {},
+                      ...usePostcardMaterial ? getPostcardOverlayStyle() : {},
+                      borderRadius: overlayBorderRadius
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                fontSize: "14px",
+                fontWeight: 600,
+                textAlign: "center",
+                color: "rgba(255,255,255,0.8)",
+                filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.5))",
+                pointerEvents: "none",
+                margin: 0,
+                opacity: visible && !closing ? 1 : 0,
+                transition: closing ? "opacity 0.1s ease" : "opacity 0.5s ease 0.3s",
+                fontFamily: usePolaroidMaterial ? "'Georgia', serif" : "inherit"
+              },
+              children: cardName
+            }
+          )
+        ] }),
+        (gyroStatus === "needs-permission" || gyroStatus === "available") && /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: toggleButtonStyle,
+            onClick: (e) => {
+              if (isMobile) return;
+              if (gyroStatus === "needs-permission") {
+                requestGyroPermission();
+              } else {
+                toggleInputMode();
+              }
+            },
+            onTouchEnd: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (gyroStatus === "needs-permission") {
+                requestGyroPermission();
+              } else {
+                toggleInputMode();
+              }
+            },
+            children: gyroStatus === "needs-permission" ? "\u{1F4F1} Enable Gyroscope" : useGyro ? "\u{1F446} Switch to Touch" : "\u{1F4F1} Switch to Gyroscope"
+          }
+        ),
+        showHint && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: "32px",
+              left: 0,
+              right: 0,
+              textAlign: "center",
+              pointerEvents: "none",
+              opacity: visible && !closing ? 0.7 : 0,
+              transition: closing ? "opacity 0.1s ease" : "opacity 0.5s ease 0.5s"
+            },
+            children: [
+              /* @__PURE__ */ jsx("p", { style: { color: "rgba(255,255,255,0.7)", fontSize: "12px", margin: 0 }, children: hintText }),
+              /* @__PURE__ */ jsx("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "10px", marginTop: "4px" }, children: "Tap anywhere to close" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: closeButtonStyle,
+            onClick: (e) => {
+              if (isMobile) return;
+              onClose();
+            },
+            onTouchEnd: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onClose();
+            },
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx("svg", { style: { width: "24px", height: "24px", color: "white" }, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { FORM_FACTORS, GoodZCardFocus, getAspectRatioCSS, getFormFactorSpec };
+//# sourceMappingURL=chunk-K6IFJWLB.js.map
+//# sourceMappingURL=chunk-K6IFJWLB.js.map