@mohasinac/appkit 2.2.0 → 2.3.0

package/dist/features/homepage/components/CharacterHotspot.js

@@ -1,373 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
-import { useState, useCallback, useEffect, useRef } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { useMediaQuery } from "../../../react";
-import { Button, Div, Heading, Row, Section, Span, Text } from "../../../ui";
-/* ── Fallback when no Firestore config is saved yet ──────────────────────────
-   Consumers can override the full config via the `config` prop.
-───────────────────────────────────────────────────────────────── */
-const FALLBACK_IMAGE = "/animevssuperhero.jpg";
-const FALLBACK_IMAGE_ALT = "DC, Marvel and Anime characters";
-const DEFAULT_HOTSPOTS = [
-    {
-        id: "spiderman",
-        name: "SPIDER-MAN",
-        universe: "Marvel",
-        description: "Mid-swing, wall-crawling, Symbiote — Peter Parker in every iconic pose. Hot Toys & Iron Studios pieces with real fabric suits and LED arc detail.",
-        href: "/franchise/marvel",
-        xPct: 8,
-        yPct: 22,
-        accent: "#E8001C",
-        badge: "MARVEL",
-        buyText: "Get Spider-Man Figures",
-    },
-    {
-        id: "ironman",
-        name: "IRON MAN",
-        universe: "Marvel",
-        description: "Tony Stark's armour at display scale. Arc-reactor glow, battle-damaged panels, nano-tech variants — the cornerstone of every serious Marvel shelf.",
-        href: "/franchise/marvel",
-        xPct: 18,
-        yPct: 58,
-        accent: "#E8001C",
-        badge: "MARVEL",
-        buyText: "Get Iron Man Figures",
-    },
-    {
-        id: "robin",
-        name: "ROBIN",
-        universe: "DC Comics",
-        description: "Dick Grayson's acrobatic grace in resin. Flying-kick, staff-spin & Nightwing-transition statues — the most underrated must-have in the Bat-family lineup.",
-        href: "/franchise/dc-comics",
-        xPct: 28,
-        yPct: 18,
-        accent: "#4A90D9",
-        badge: "DC",
-        buyText: "Get Robin Figures",
-    },
-    {
-        id: "batman",
-        name: "BATMAN",
-        universe: "DC Comics",
-        description: "Gotham's Dark Knight on your shelf. Full-armoured, Nanosuit & Bat-suit variants from Hot Toys & Prime 1 Studio — every grim detail preserved in 1/6 scale.",
-        href: "/franchise/dc-comics",
-        xPct: 36,
-        yPct: 42,
-        accent: "#4A90D9",
-        badge: "DC",
-        buyText: "Get Batman Figures",
-    },
-    {
-        id: "captain-america",
-        name: "CAPTAIN AMERICA",
-        universe: "Marvel",
-        description: "Shield raised, Endgame-ready. WW2 Origin, MCU & Broken Shield variants — the most recognisable Marvel statue in any collection. Limited stock.",
-        href: "/franchise/marvel",
-        xPct: 12,
-        yPct: 76,
-        accent: "#0057FF",
-        badge: "MARVEL",
-        buyText: "Get Cap Figures",
-    },
-    {
-        id: "superman",
-        name: "SUPERMAN",
-        universe: "DC Comics",
-        description: "Kal-El soaring above your display. XM Studios & Iron Studios full-sculpt statues — classic red cape and New 52 dark variants, ready to ship.",
-        href: "/franchise/dc-comics",
-        xPct: 44,
-        yPct: 68,
-        accent: "#0057FF",
-        badge: "DC",
-        buyText: "Get Superman Figures",
-    },
-    {
-        id: "goku",
-        name: "SON GOKU",
-        universe: "Dragon Ball",
-        description: "Ultra Instinct, SSJ4, Kamehameha — every legendary form. S.H.Figuarts & Banpresto pieces sell out within hours of restock. Order yours today.",
-        href: "/franchise/dragon-ball",
-        xPct: 51,
-        yPct: 36,
-        accent: "#FFE500",
-        badge: "ANIME",
-        buyText: "Get Goku Figures",
-    },
-    {
-        id: "naruto",
-        name: "NARUTO UZUMAKI",
-        universe: "Naruto Shippuden",
-        description: "Sage Mode, Baryon Mode, Nine-Tails Chakra — Naruto's greatest forms frozen in resin. These restock and sell out within days. Don't sleep on it.",
-        href: "/franchise/naruto",
-        xPct: 57,
-        yPct: 78,
-        accent: "#FF6B00",
-        badge: "ANIME",
-        buyText: "Get Naruto Figures",
-    },
-    {
-        id: "ichigo",
-        name: "ICHIGO KUROSAKI",
-        universe: "Bleach",
-        description: "Bankai Tensa Zangetsu, Hollow & Final Getsuga forms — some of anime's most dramatic poses. Bleach figures are rare. When they restock, they go fast.",
-        href: "/franchise/bleach",
-        xPct: 70,
-        yPct: 20,
-        accent: "#4A90D9",
-        badge: "ANIME",
-        buyText: "Get Ichigo Figures",
-    },
-    {
-        id: "luffy",
-        name: "MONKEY D. LUFFY",
-        universe: "One Piece",
-        description: "Gear 5, Red Roc, Boundman — Luffy's explosive power takes centre stage. One Piece is the fastest-moving anime series on our platform. Grab yours now.",
-        href: "/franchise/one-piece",
-        xPct: 80,
-        yPct: 50,
-        accent: "#FFE500",
-        badge: "ANIME",
-        buyText: "Get Luffy Figures",
-    },
-    {
-        id: "saitama",
-        name: "SAITAMA",
-        universe: "One Punch Man",
-        description: "One punch. That's all it takes. From deadpan standing pose to the single devastating strike — Saitama figures are deceptively brilliant shelf pieces.",
-        href: "/franchise/one-punch-man",
-        xPct: 91,
-        yPct: 50,
-        accent: "#FFE500",
-        badge: "ANIME",
-        buyText: "Get Saitama Figures",
-    },
-];
-export function CharacterHotspot({ config, defaultHotspots = DEFAULT_HOTSPOTS, universeLinks, shopAllHref = "/search", heading = "HEROES & LEGENDS", subheading, }) {
-    if (config !== undefined && config !== null && !config.active)
-        return null;
-    const panoramicImage = config?.imageUrl || FALLBACK_IMAGE;
-    const panoramicAlt = config?.imageAlt || FALLBACK_IMAGE_ALT;
-    const hotspots = config?.pins && config.pins.length > 0 ? config.pins : defaultHotspots;
-    return (_jsx(CharacterHotspotInner, { panoramicImage: panoramicImage, panoramicAlt: panoramicAlt, hotspots: hotspots, universeLinks: universeLinks ?? DEFAULT_UNIVERSE_LINKS, shopAllHref: shopAllHref, heading: heading, subheading: subheading }));
-}
-const DEFAULT_UNIVERSE_LINKS = [
-    { label: "MARVEL", href: "/franchise/marvel", color: "#E8001C", icon: "⚡" },
-    {
-        label: "DC COMICS",
-        href: "/franchise/dc-comics",
-        color: "#4A90D9",
-        icon: "🦇",
-    },
-    {
-        label: "DRAGON BALL",
-        href: "/franchise/dragon-ball",
-        color: "#FFE500",
-        icon: "✦",
-    },
-    { label: "NARUTO", href: "/franchise/naruto", color: "#FF6B00", icon: "🍃" },
-    {
-        label: "ONE PIECE",
-        href: "/franchise/one-piece",
-        color: "#FFE500",
-        icon: "⚓",
-    },
-    { label: "BLEACH", href: "/franchise/bleach", color: "#4A90D9", icon: "⚔" },
-];
-function CharacterHotspotInner({ panoramicImage, panoramicAlt, hotspots, universeLinks, shopAllHref, heading, subheading, }) {
-    const [activeId, setActiveId] = useState(null);
-    const containerRef = useRef(null);
-    const isMobile = useMediaQuery("(max-width: 767px)");
-    const toggle = useCallback((id) => {
-        setActiveId((prev) => (prev === id ? null : id));
-    }, []);
-    useEffect(() => {
-        function handleClick(e) {
-            if (containerRef.current &&
-                !containerRef.current.contains(e.target)) {
-                setActiveId(null);
-            }
-        }
-        document.addEventListener("mousedown", handleClick);
-        return () => document.removeEventListener("mousedown", handleClick);
-    }, []);
-    useEffect(() => {
-        function handleKey(e) {
-            if (e.key === "Escape")
-                setActiveId(null);
-        }
-        document.addEventListener("keydown", handleKey);
-        return () => document.removeEventListener("keydown", handleKey);
-    }, []);
-    const active = hotspots.find((h) => h.id === activeId) ?? null;
-    return (_jsxs(Section, { style: {
-            background: "var(--dark-section-deep)",
-            borderTop: "3px solid var(--dark-section-bg)",
-            borderBottom: "3px solid var(--dark-section-bg)",
-            overflow: "hidden",
-        }, children: [_jsxs(Div, { ref: containerRef, className: "relative w-full", style: { aspectRatio: "16/9", minHeight: "420px" }, children: [_jsx(Div, { className: "absolute top-0 left-0 right-0 z-10 pointer-events-none", style: {
-                            background: "linear-gradient(to bottom, rgba(10,10,18,0.88) 0%, rgba(10,10,18,0.40) 50%, transparent 100%)",
-                        }, children: _jsxs(Row, { wrap: true, align: "start", justify: "between", gap: "sm", className: "pointer-events-auto mx-auto max-w-7xl px-4 pt-4 pb-6 gap-y-3", children: [_jsxs(Div, { children: [_jsx(Text, { className: "mb-1 text-xs font-black uppercase tracking-[0.2em]", style: { color: "var(--color-red)" }, children: "Explore the Universe" }), _jsx(Heading, { level: 2, style: {
-                                                fontFamily: "var(--font-bangers, Bangers, cursive)",
-                                                fontSize: "clamp(1.8rem, 4.5vw, 3rem)",
-                                                letterSpacing: "0.07em",
-                                                color: "#FFFFFF",
-                                                lineHeight: 1,
-                                            }, children: heading }), subheading && (_jsx(Text, { className: "mt-2 text-sm font-medium max-w-md", style: { color: "var(--dark-section-muted)" }, children: subheading })), !subheading && (_jsxs(Text, { className: "mt-2 text-sm font-medium max-w-md", style: { color: "var(--dark-section-muted)" }, children: ["& beyond \u2014 tap the", " ", _jsx(Span, { className: "inline-flex items-center justify-center rounded-full font-light", style: {
-                                                        background: "rgba(255,255,255,0.92)",
-                                                        color: "#111111",
-                                                        width: 18,
-                                                        height: 18,
-                                                        border: "1.5px solid rgba(0,0,0,0.18)",
-                                                        boxShadow: "0 1px 4px rgba(0,0,0,0.4)",
-                                                        verticalAlign: "middle",
-                                                        fontSize: 13,
-                                                        lineHeight: 1,
-                                                    }, children: "+" }), " ", "pins to get & buy each character."] }))] }), _jsx(Link, { href: shopAllHref, className: "hidden sm:inline-flex items-center gap-2 px-5 py-2 text-sm font-black uppercase tracking-widest transition-transform hover:-translate-y-0.5", style: {
-                                        fontFamily: "var(--font-bangers, Bangers, cursive)",
-                                        letterSpacing: "0.1em",
-                                        background: "var(--color-red)",
-                                        color: "#FFFFFF",
-                                        border: "3px solid var(--border-ink)",
-                                        boxShadow: "4px 4px 0px var(--border-ink)",
-                                    }, children: "SHOP ALL \u2192" })] }) }), _jsxs(Div, { className: "absolute inset-0 overflow-hidden", children: [_jsx(Image, { src: panoramicImage, alt: panoramicAlt, fill: true, className: "object-cover object-top", sizes: "100vw", priority: false }), _jsx(Div, { className: "absolute inset-0", style: {
-                                    background: "linear-gradient(to right, rgba(10,10,18,0.72) 0%, rgba(10,10,18,0.30) 50%, rgba(10,10,18,0.72) 100%)",
-                                } }), _jsx(Div, { className: "absolute inset-0", style: {
-                                    background: "linear-gradient(to bottom, rgba(10,10,18,0.25) 0%, transparent 40%, rgba(10,10,18,0.65) 100%)",
-                                } }), _jsx(Div, { className: "absolute bottom-0 left-0 right-0 h-16 pointer-events-none", style: {
-                                    background: "linear-gradient(to bottom, transparent, #0A0A12)",
-                                } })] }), _jsx(Div, { className: "hidden sm:flex absolute left-0 right-0 justify-around items-start pointer-events-none", style: { top: "clamp(120px, 18vh, 165px)", zIndex: 5 }, children: [
-                            { label: "MARVEL", color: "#E8001C" },
-                            { label: "DC COMICS", color: "#4A90D9" },
-                            { label: "ANIME", color: "#FFE500" },
-                        ].map(({ label, color }) => (_jsxs(Div, { className: "flex flex-col items-center", children: [_jsx(Span, { className: "px-3 py-1 text-[10px] sm:text-xs font-black uppercase tracking-[0.18em] rounded-sm", style: {
-                                        background: color,
-                                        color: color === "#FFE500" ? "#0D0D0D" : "#FFFFFF",
-                                        boxShadow: "2px 2px 0px rgba(0,0,0,0.6)",
-                                        fontFamily: "var(--font-bangers, Bangers, cursive)",
-                                        letterSpacing: "0.16em",
-                                    }, children: label }), _jsx(Div, { className: "mt-1 h-5 sm:h-8 w-px", style: { background: color, opacity: 0.5 } })] }, label))) }), hotspots.map((hotspot) => {
-                        const isActive = activeId === hotspot.id;
-                        const popupLeft = hotspot.xPct <= 55;
-                        const popupAbove = hotspot.yPct > 65;
-                        return (_jsxs(Div, { className: "absolute", style: {
-                                left: `${hotspot.xPct}%`,
-                                top: `${hotspot.yPct}%`,
-                                zIndex: isActive ? 30 : 10,
-                                transform: "translate(-50%, -50%)",
-                            }, children: [!isActive && (_jsx(Span, { className: "absolute rounded-full animate-ping", style: {
-                                        inset: -6,
-                                        background: "rgba(255,255,255,0.2)",
-                                        pointerEvents: "none",
-                                    } })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => toggle(hotspot.id), "aria-label": `Info about ${hotspot.name}`, "aria-expanded": isActive, className: "relative flex items-center justify-center rounded-full", style: {
-                                        width: isMobile ? 18 : 38,
-                                        height: isMobile ? 18 : 38,
-                                        background: isMobile
-                                            ? "none"
-                                            : isActive
-                                                ? "rgba(30,30,30,0.92)"
-                                                : "rgba(255,255,255,0.95)",
-                                        border: isMobile
-                                            ? "none"
-                                            : isActive
-                                                ? "2px solid rgba(255,255,255,0.25)"
-                                                : "2px solid rgba(0,0,0,0.18)",
-                                        boxShadow: isMobile ? "none" : "0 2px 12px rgba(0,0,0,0.55)",
-                                        backdropFilter: isMobile ? "none" : "blur(4px)",
-                                        padding: 0,
-                                        transition: "transform 0.2s ease, opacity 0.2s ease",
-                                        transform: isActive ? "scale(1.2) rotate(45deg)" : "scale(1)",
-                                        color: isMobile
-                                            ? "#FFFFFF"
-                                            : isActive
-                                                ? "#FFFFFF"
-                                                : "#111111",
-                                        fontSize: isMobile ? 18 : 22,
-                                        fontWeight: 200,
-                                        lineHeight: 1,
-                                        cursor: "pointer",
-                                        textShadow: isMobile ? "0 1px 6px rgba(0,0,0,0.8)" : "none",
-                                        opacity: isActive ? 0.7 : 1,
-                                    }, children: "+" }), isActive && !isMobile && (_jsxs(Div, { className: "absolute", style: {
-                                        ...(popupAbove
-                                            ? {
-                                                bottom: "calc(100% + 12px)",
-                                                top: "auto",
-                                                transform: "none",
-                                            }
-                                            : { top: "50%", transform: "translateY(-50%)" }),
-                                        ...(popupLeft
-                                            ? { left: "calc(100% + 14px)" }
-                                            : { right: "calc(100% + 14px)" }),
-                                        width: 300,
-                                        background: "rgba(255,255,255,0.97)",
-                                        boxShadow: "0 12px 48px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3)",
-                                        borderRadius: 4,
-                                        overflow: "hidden",
-                                        zIndex: 40,
-                                        animation: "fadeInUp 0.2s ease both",
-                                    }, children: [_jsx(Div, { style: { height: 4, background: hotspot.accent } }), _jsxs(Div, { className: "px-5 py-4", children: [_jsx(Text, { className: "text-[10px] font-bold uppercase tracking-[0.18em] mb-1", style: {
-                                                        color: hotspot.accent === "#FFE500"
-                                                            ? "#b08800"
-                                                            : hotspot.accent,
-                                                    }, children: hotspot.universe }), _jsx(Heading, { level: 3, className: "font-black leading-tight mb-3", style: {
-                                                        fontFamily: "var(--font-bangers, Bangers, cursive)",
-                                                        fontSize: "1.45rem",
-                                                        letterSpacing: "0.06em",
-                                                        color: "#111111",
-                                                    }, children: hotspot.name }), _jsx(Text, { className: "text-xs leading-relaxed mb-4", style: { color: "#374151" }, children: hotspot.description }), _jsxs(Link, { href: hotspot.href, onClick: () => setActiveId(null), className: "flex items-center justify-between px-4 py-2.5 text-sm font-black uppercase transition-opacity hover:opacity-85", style: {
-                                                        fontFamily: "var(--font-bangers, Bangers, cursive)",
-                                                        letterSpacing: "0.1em",
-                                                        background: hotspot.accent,
-                                                        color: hotspot.accent === "#FFE500" ? "#0D0D0D" : "#FFFFFF",
-                                                        borderRadius: 2,
-                                                    }, children: [hotspot.buyText, _jsx(Span, { "aria-hidden": "true", children: "\u2192" })] })] })] }))] }, hotspot.id));
-                    })] }), isMobile && active && (_jsx(Div, { className: "fixed inset-0 z-50 flex items-end", style: { background: "rgba(0,0,0,0.6)", backdropFilter: "blur(3px)" }, onClick: (e) => {
-                    if (e.target === e.currentTarget)
-                        setActiveId(null);
-                }, children: _jsxs(Div, { className: "w-full", style: {
-                        background: "var(--surface-elevated)",
-                        borderTopLeftRadius: 16,
-                        borderTopRightRadius: 16,
-                        overflow: "hidden",
-                        animation: "fadeInUp 0.22s ease both",
-                    }, children: [_jsx(Div, { className: "flex justify-center pt-3 pb-1", children: _jsx(Div, { style: {
-                                    width: 40,
-                                    height: 4,
-                                    borderRadius: 2,
-                                    background: "#D1D5DB",
-                                } }) }), _jsx(Div, { style: { height: 4, background: active.accent } }), _jsxs(Div, { className: "px-5 pt-4 pb-10", children: [_jsx(Text, { className: "text-[10px] font-bold uppercase tracking-[0.18em] mb-1", style: {
-                                        color: active.accent === "#FFE500" ? "#b08800" : active.accent,
-                                    }, children: active.universe }), _jsx(Heading, { level: 3, className: "font-black leading-tight mb-2", style: {
-                                        fontFamily: "var(--font-bangers, Bangers, cursive)",
-                                        fontSize: "clamp(1.5rem, 6vw, 2rem)",
-                                        letterSpacing: "0.06em",
-                                        color: "#111111",
-                                    }, children: active.name }), _jsx(Text, { className: "text-sm leading-relaxed mb-5", style: { color: "#374151" }, children: active.description }), _jsxs(Div, { className: "flex gap-3", children: [_jsxs(Link, { href: active.href, onClick: () => setActiveId(null), className: "flex-1 flex items-center justify-between px-4 py-3 font-black uppercase", style: {
-                                                fontFamily: "var(--font-bangers, Bangers, cursive)",
-                                                letterSpacing: "0.1em",
-                                                fontSize: "0.9rem",
-                                                background: active.accent,
-                                                color: active.accent === "#FFE500" ? "#0D0D0D" : "#FFFFFF",
-                                                borderRadius: 4,
-                                            }, children: [active.buyText, _jsx(Span, { "aria-hidden": "true", children: "\u2192" })] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => setActiveId(null), className: "px-5 py-3 text-sm font-bold rounded", style: { background: "#F1F5F9", color: "#475569" }, children: "Close" })] })] })] }) })), _jsx(Div, { className: "mx-auto max-w-7xl px-4 py-6 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6", style: { borderTop: "1px solid rgba(255,255,255,0.08)" }, children: universeLinks.map(({ label, href, color, icon }) => (_jsxs(Link, { href: href, className: "group flex items-center gap-2.5 px-3 py-2.5 rounded-sm transition-all hover:-translate-y-0.5", style: {
-                        background: "rgba(255,255,255,0.04)",
-                        border: "1px solid rgba(255,255,255,0.08)",
-                        transition: "all 0.15s ease",
-                    }, onMouseEnter: (e) => {
-                        e.currentTarget.style.borderColor = color;
-                        e.currentTarget.style.background =
-                            `${color}18`;
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.borderColor =
-                            "rgba(255,255,255,0.08)";
-                        e.currentTarget.style.background =
-                            "rgba(255,255,255,0.04)";
-                    }, children: [_jsx(Span, { className: "text-base select-none", "aria-hidden": "true", children: icon }), _jsx(Span, { className: "text-xs font-black uppercase tracking-wide", style: {
-                                fontFamily: "var(--font-bangers, Bangers, cursive)",
-                                letterSpacing: "0.1em",
-                                color: "#E2E8F0",
-                            }, children: label }), _jsx(Span, { className: "ml-auto text-xs", style: { color: "#475569", transition: "color 0.15s" }, children: "\u2192" })] }, label))) })] }));
-}

package/dist/features/homepage/components/CharacterHotspotForm.d.ts

@@ -1,26 +0,0 @@
-import type { CharacterHotspotConfig } from "../types";
-export interface CharacterHotspotFormProps {
-    initial?: CharacterHotspotConfig | null;
-    /**
-     * Upload an image and return its public URL.
-     * Implement however suits your storage backend:
-     * ```ts
-     * onUploadImage={async (file) => {
-     *   const storage = getStorage(getFirebaseApp());
-     *   const storageRef = ref(storage, `character-hotspot/${Date.now()}_${file.name}`);
-     *   await uploadBytes(storageRef, file);
-     *   return getDownloadURL(storageRef);
-     * }}
-     * ```
-     */
-    onUploadImage: (file: File) => Promise<string>;
-    /**
-     * Persist the final config (e.g. write to Firestore).
-     */
-    onSave: (config: CharacterHotspotConfig) => Promise<void>;
-    /**
-     * Optional callback after a successful save (e.g. revalidate cache).
-     */
-    onAfterSave?: () => void | Promise<void>;
-}
-export declare function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSave, }: CharacterHotspotFormProps): import("react/jsx-runtime").JSX.Element;