@mohasinac/appkit 2.7.27 → 2.7.31

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

@@ -11,6 +11,7 @@ import { Button, Div, Heading, Row, Section, Span, Text } from "../../../ui";
 ----------------------------------------------------------------- */
 const FALLBACK_IMAGE = "/animevssuperhero.jpg";
 const FALLBACK_IMAGE_ALT = "DC, Marvel and Anime characters";
+const FONT_BANGERS = "var(--font-bangers, Bangers, cursive)";
 const DEFAULT_HOTSPOTS = [
     {
         id: "spiderman",
@@ -176,6 +177,120 @@ const DEFAULT_UNIVERSE_LINKS = [
     },
     { label: "BLEACH", href: "/franchise/bleach", color: "#4A90D9", icon: "⚔" },
 ];
+function HotspotHeaderOverlay({ heading, subheading, shopAllHref, }) {
+    return (_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: FONT_BANGERS,
+                                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 })) : (_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: FONT_BANGERS,
+                        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" })] }) }));
+}
+function HotspotImageLayer({ panoramicImage, panoramicAlt, }) {
+    return (_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)",
+                } })] }));
+}
+function HotspotPin({ hotspot, isActive, isMobile, toggle, onClose, }) {
+    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: FONT_BANGERS, 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: onClose, className: "flex items-center justify-between px-4 py-2.5 text-sm font-black uppercase transition-opacity hover:opacity-85", style: {
+                                    fontFamily: FONT_BANGERS,
+                                    letterSpacing: "0.1em",
+                                    background: hotspot.accent,
+                                    color: hotspot.accent === "#FFE500" ? "#0D0D0D" : "#FFFFFF",
+                                    borderRadius: 2,
+                                }, children: [hotspot.buyText, _jsx(Span, { "aria-hidden": "true", children: "\u2192" })] })] })] }))] }));
+}
+function MobileHotspotSheet({ active, onClose, }) {
+    return (_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)
+            onClose(); }, 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: FONT_BANGERS, 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: onClose, className: "flex-1 flex items-center justify-between px-4 py-3 font-black uppercase", style: {
+                                        fontFamily: FONT_BANGERS,
+                                        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: onClose, className: "px-5 py-3 text-sm font-bold rounded", style: { background: "#F1F5F9", color: "#475569" }, children: "Close" })] })] })] }) }));
+}
+function UniverseBrowseRow({ universeLinks, }) {
+    return (_jsx(Div, { className: `mx-auto max-w-7xl px-4 py-6 ${THEME_CONSTANTS.grid.cols6Lg} gap-3`, 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: FONT_BANGERS, letterSpacing: "0.1em", color: "#E2E8F0" }, children: label }), _jsx(Span, { className: "ml-auto text-xs", style: { color: "#475569", transition: "color 0.15s" }, children: "\u2192" })] }, label))) }));
+}
 function CharacterHotspotInner({ panoramicImage, panoramicAlt, hotspots, universeLinks, shopAllHref, heading, subheading, }) {
     const [activeId, setActiveId] = useState(null);
     const containerRef = useRef(null);
@@ -185,8 +300,7 @@ function CharacterHotspotInner({ panoramicImage, panoramicAlt, hotspots, univers
     }, []);
     useEffect(() => {
         function handleClick(e) {
-            if (containerRef.current &&
-                !containerRef.current.contains(e.target)) {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
                 setActiveId(null);
             }
         }
@@ -207,38 +321,7 @@ function CharacterHotspotInner({ panoramicImage, panoramicAlt, hotspots, univers
             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: [
+        }, children: [_jsxs(Div, { ref: containerRef, className: "relative w-full", style: { aspectRatio: "16/9", minHeight: "420px" }, children: [_jsx(HotspotHeaderOverlay, { heading: heading, subheading: subheading, shopAllHref: shopAllHref }), _jsx(HotspotImageLayer, { panoramicImage: panoramicImage, panoramicAlt: panoramicAlt }), _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" },
@@ -246,128 +329,7 @@ function CharacterHotspotInner({ panoramicImage, panoramicAlt, hotspots, univers
                                         background: color,
                                         color: color === "#FFE500" ? "#0D0D0D" : "#FFFFFF",
                                         boxShadow: "2px 2px 0px rgba(0,0,0,0.6)",
-                                        fontFamily: "var(--font-bangers, Bangers, cursive)",
+                                        fontFamily: FONT_BANGERS,
                                         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 ${THEME_CONSTANTS.grid.cols6Lg} gap-3`, 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))) })] }));
+                                    }, children: label }), _jsx(Div, { className: "mt-1 h-5 sm:h-8 w-px", style: { background: color, opacity: 0.5 } })] }, label))) }), hotspots.map((hotspot) => (_jsx(HotspotPin, { hotspot: hotspot, isActive: activeId === hotspot.id, isMobile: isMobile, toggle: toggle, onClose: () => setActiveId(null) }, hotspot.id)))] }), isMobile && active && (_jsx(MobileHotspotSheet, { active: active, onClose: () => setActiveId(null) })), _jsx(UniverseBrowseRow, { universeLinks: universeLinks })] }));
 }

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

@@ -6,6 +6,11 @@ import { Button, Div, Heading, Input, Label, Li, Row, Span, Text, Textarea, Ul,
 function randomId() {
     return Math.random().toString(36).slice(2, 9);
 }
+const CLS_STEP = "space-y-4 rounded-lg border-2 p-6";
+const CLS_IMG_WRAP = "relative w-full overflow-hidden rounded-lg";
+const CLS_INPUT = "rounded border-2 px-3 py-2 text-sm outline-none";
+const STY_BORDER_INK = "2px solid var(--border-ink)";
+const STY_CENTERED = "translate(-50%, -50%)";
 export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSave, }) {
     const [imageUrl, setImageUrl] = useState(initial?.imageUrl ?? "");
     const [imageAlt, setImageAlt] = useState(initial?.imageAlt ?? "DC, Marvel and Anime characters");
@@ -120,15 +125,15 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                             : "var(--color-black)",
                                         border: i <= stepIndex
                                             ? "2px solid var(--color-black)"
-                                            : "2px solid var(--border-ink)",
+                                            : STY_BORDER_INK,
                                     }, children: i < stepIndex ? "✓" : i + 1 }), i < STEPS.length - 1 && (_jsx(Div, { className: "h-0.5 flex-1", style: {
                                         background: i < stepIndex
                                             ? "var(--color-black)"
                                             : "var(--border-ink)",
-                                    } }))] }), _jsx(Span, { className: "mt-1 text-center text-[10px] font-medium", style: { color: "var(--color-muted)" }, children: s.label })] }, s.key))) }), step === "image" && (_jsxs(Div, { className: "space-y-4 rounded-lg border-2 p-6", style: {
+                                    } }))] }), _jsx(Span, { className: "mt-1 text-center text-[10px] font-medium", style: { color: "var(--color-muted)" }, children: s.label })] }, s.key))) }), step === "image" && (_jsxs(Div, { className: CLS_STEP, style: {
                     borderColor: "var(--border-ink)",
                     background: "var(--surface-elevated)",
-                }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Upload Background Image" }), _jsx(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: "Choose a wide panoramic image that shows all the characters. You will place pins on it in the next step." }), _jsxs(Label, { className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-8 transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Span, { className: "text-3xl", children: "\uD83D\uDDBC" }), _jsx(Span, { className: "font-medium", children: uploading ? "Uploading…" : "Click to choose image" }), _jsx(Span, { className: "text-xs", style: { color: "var(--color-muted)" }, children: "JPG, PNG, WebP \u2014 wide landscape images work best" }), _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), imageUrl && (_jsxs(Div, { className: "space-y-1", children: [_jsx(Div, { className: "relative w-full overflow-hidden rounded-lg", style: { paddingTop: "37.5%" }, children: _jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "680px" }) }), _jsx(Text, { className: "text-xs font-medium text-green-700", children: "\u2713 Image uploaded" })] })), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), placeholder: "DC, Marvel and Anime characters", className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Upload Background Image" }), _jsx(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: "Choose a wide panoramic image that shows all the characters. You will place pins on it in the next step." }), _jsxs(Label, { className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-8 transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Span, { className: "text-3xl", children: "\uD83D\uDDBC" }), _jsx(Span, { className: "font-medium", children: uploading ? "Uploading…" : "Click to choose image" }), _jsx(Span, { className: "text-xs", style: { color: "var(--color-muted)" }, children: "JPG, PNG, WebP \u2014 wide landscape images work best" }), _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), imageUrl && (_jsxs(Div, { className: "space-y-1", children: [_jsx(Div, { className: CLS_IMG_WRAP, style: { paddingTop: "37.5%" }, children: _jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "680px" }) }), _jsx(Text, { className: "text-xs font-medium text-green-700", children: "\u2713 Image uploaded" })] })), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), placeholder: "DC, Marvel and Anime characters", className: CLS_INPUT, style: {
                                     borderColor: "var(--border-ink)",
                                     background: "var(--surface-elevated)",
                                     color: "var(--color-black)",
@@ -138,17 +143,17 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                 }, children: "Skip to Review" })), _jsx(Button, { type: "button", onClick: () => setStep("place"), disabled: !imageUrl || uploading, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
                                     background: "var(--color-black)",
                                     color: "var(--color-yellow)",
-                                }, children: "Next: Place Pins \u2192" })] })] })), step === "place" && (_jsxs(Div, { className: "space-y-4 rounded-lg border-2 p-6", style: {
+                                }, children: "Next: Place Pins \u2192" })] })] })), step === "place" && (_jsxs(Div, { className: CLS_STEP, style: {
                     borderColor: "var(--border-ink)",
                     background: "var(--surface-elevated)",
-                }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Place a Pin" }), _jsxs(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: [_jsx("strong", { children: "Click anywhere on the image" }), " to drop a pin, or enter exact coordinates below."] }), _jsxs(Div, { ref: containerRef, className: "relative w-full overflow-hidden rounded-lg", style: {
+                }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Place a Pin" }), _jsxs(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: [_jsx("strong", { children: "Click anywhere on the image" }), " to drop a pin, or enter exact coordinates below."] }), _jsxs(Div, { ref: containerRef, className: CLS_IMG_WRAP, style: {
                             paddingTop: "56.25%",
                             cursor: "crosshair",
                             background: "#111",
                         }, onClick: handleImageClick, children: [_jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 680px) 100vw" }), pins.map((pin) => (_jsxs(Div, { className: "pointer-events-none absolute", style: {
                                     left: `${pin.xPct}%`,
                                     top: `${pin.yPct}%`,
-                                    transform: "translate(-50%, -50%)",
+                                    transform: STY_CENTERED,
                                     zIndex: 10,
                                 }, children: [_jsx(Div, { className: "flex items-center justify-center rounded-full text-xs font-bold text-white", style: {
                                             width: 24,
@@ -159,7 +164,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                         }, children: "+" }), pin.name && (_jsx(Div, { className: "pointer-events-none absolute left-7 top-1/2 -translate-y-1/2 whitespace-nowrap rounded px-1.5 py-0.5 text-[9px] font-bold text-white", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id))), draftPos && (_jsxs(Div, { className: "absolute", style: {
                                     left: `${draftPos.xPct}%`,
                                     top: `${draftPos.yPct}%`,
-                                    transform: "translate(-50%, -50%)",
+                                    transform: STY_CENTERED,
                                     zIndex: 20,
                                 }, children: [_jsx(Span, { className: "absolute animate-ping rounded-full", style: {
                                             inset: -6,
@@ -201,18 +206,18 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                         const v = parseFloat(e.target.value);
                                         if (!isNaN(v))
                                             onChange(v);
-                                    }, className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                    }, className: CLS_INPUT, style: {
                                         borderColor: "var(--border-ink)",
                                         background: "var(--surface-elevated)",
                                         color: "var(--color-black)",
                                     } })] }, field))) }), pins.length > 0 && (_jsxs(Text, { className: "text-xs", style: { color: "var(--color-muted)" }, children: [pins.length, " pin", pins.length !== 1 ? "s" : "", " already placed on this image."] })), _jsxs(Row, { justify: "between", className: "border-t pt-4", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => setStep("image"), variant: "ghost", className: "px-4 py-2 text-sm font-medium rounded transition-opacity hover:opacity-70", style: { background: "transparent", color: "var(--color-black)" }, children: "\u2190 Back" }), _jsxs(Row, { gap: "sm", children: [pins.length > 0 && (_jsx(Button, { type: "button", onClick: () => setStep("review"), variant: "outline", className: "px-4 py-2 text-sm font-bold rounded transition-opacity", style: {
                                             background: "var(--surface-warm)",
                                             color: "var(--color-black)",
-                                            border: "2px solid var(--border-ink)",
+                                            border: STY_BORDER_INK,
                                         }, children: "Done Adding Pins" })), _jsx(Button, { type: "button", onClick: () => setStep("details"), disabled: !draftPos, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
                                             background: "var(--color-black)",
                                             color: "var(--color-yellow)",
-                                        }, children: "Continue: Add Details \u2192" })] })] })] })), step === "details" && (_jsxs(Div, { className: "space-y-4 rounded-lg border-2 p-6", style: {
+                                        }, children: "Continue: Add Details \u2192" })] })] })] })), step === "details" && (_jsxs(Div, { className: CLS_STEP, style: {
                     borderColor: "var(--border-ink)",
                     background: "var(--surface-elevated)",
                 }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Pin Details" }), _jsxs(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: ["Fill in the details for the pin at", " ", _jsxs("strong", { children: [draftPos?.xPct, "%, ", draftPos?.yPct, "%"] }), "."] }), _jsx(Div, { className: "grid grid-cols-2 gap-3", children: [
@@ -228,7 +233,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                 onChange: setDraftUniverse,
                                 placeholder: "Marvel",
                             },
-                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: CLS_INPUT, style: {
                                         borderColor: "var(--border-ink)",
                                         background: "var(--surface-elevated)",
                                         color: "var(--color-black)",
@@ -236,7 +241,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                     borderColor: "var(--border-ink)",
                                     background: "var(--surface-elevated)",
                                     color: "var(--color-black)",
-                                }, placeholder: "Short description shown in the popup\u2026" })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Link (href) *" }), _jsx(Input, { type: "text", value: draftHref, onChange: (e) => setDraftHref(e.target.value), placeholder: "/franchise/marvel", className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                }, placeholder: "Short description shown in the popup\u2026" })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Link (href) *" }), _jsx(Input, { type: "text", value: draftHref, onChange: (e) => setDraftHref(e.target.value), placeholder: "/franchise/marvel", className: CLS_INPUT, style: {
                                     borderColor: "var(--border-ink)",
                                     background: "var(--surface-elevated)",
                                     color: "var(--color-black)",
@@ -253,11 +258,11 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                 onChange: setDraftBadge,
                                 placeholder: "MARVEL",
                             },
-                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: CLS_INPUT, style: {
                                         borderColor: "var(--border-ink)",
                                         background: "var(--surface-elevated)",
                                         color: "var(--color-black)",
-                                    } })] }, label))) }), _jsxs(Row, { align: "end", gap: "sm", children: [_jsxs(Div, { className: "flex-1 flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Accent Colour (hex)" }), _jsx(Input, { type: "text", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), placeholder: "#E8001C", className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                    } })] }, label))) }), _jsxs(Row, { align: "end", gap: "sm", children: [_jsxs(Div, { className: "flex-1 flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Accent Colour (hex)" }), _jsx(Input, { type: "text", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), placeholder: "#E8001C", className: CLS_INPUT, style: {
                                             borderColor: "var(--border-ink)",
                                             background: "var(--surface-elevated)",
                                             color: "var(--color-black)",
@@ -267,20 +272,20 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                         }, variant: "outline", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
                                             background: "var(--surface-warm)",
                                             color: "var(--color-black)",
-                                            border: "2px solid var(--border-ink)",
+                                            border: STY_BORDER_INK,
                                         }, children: "Save Pin & Finish" }), _jsx(Button, { type: "button", disabled: !draftName || !draftHref, onClick: () => {
                                             commitDraftPin();
                                             setStep("place");
                                         }, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
                                             background: "var(--color-black)",
                                             color: "var(--color-yellow)",
-                                        }, children: "Save Pin & Add Another \u2192" })] })] })] })), step === "review" && (_jsxs(Div, { className: "space-y-4 rounded-lg border-2 p-6", style: {
+                                        }, children: "Save Pin & Add Another \u2192" })] })] })] })), step === "review" && (_jsxs(Div, { className: CLS_STEP, style: {
                     borderColor: "var(--border-ink)",
                     background: "var(--surface-elevated)",
-                }, children: [_jsxs(Row, { justify: "between", children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Review & Save" }), _jsxs(Span, { className: "rounded-full px-3 py-1 text-sm font-bold", style: { background: "var(--surface-warm)" }, children: [pins.length, " pin", pins.length !== 1 ? "s" : ""] })] }), _jsxs(Div, { className: "relative w-full overflow-hidden rounded-lg", style: { paddingTop: "56.25%", background: "#111" }, children: [_jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 680px) 100vw" }), pins.map((pin) => (_jsxs(Div, { className: "pointer-events-none absolute", style: {
+                }, children: [_jsxs(Row, { justify: "between", children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Review & Save" }), _jsxs(Span, { className: "rounded-full px-3 py-1 text-sm font-bold", style: { background: "var(--surface-warm)" }, children: [pins.length, " pin", pins.length !== 1 ? "s" : ""] })] }), _jsxs(Div, { className: CLS_IMG_WRAP, style: { paddingTop: "56.25%", background: "#111" }, children: [_jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 680px) 100vw" }), pins.map((pin) => (_jsxs(Div, { className: "pointer-events-none absolute", style: {
                                     left: `${pin.xPct}%`,
                                     top: `${pin.yPct}%`,
-                                    transform: "translate(-50%, -50%)",
+                                    transform: STY_CENTERED,
                                     zIndex: 10,
                                 }, children: [_jsx(Div, { className: "flex items-center justify-center rounded-full text-xs font-bold text-white", style: {
                                             width: 28,
@@ -291,7 +296,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                         }, children: "+" }), pin.name && (_jsx(Div, { className: "pointer-events-none absolute left-8 top-1/2 -translate-y-1/2 whitespace-nowrap rounded px-1.5 py-0.5 text-[9px] font-bold text-white", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id)))] }), pins.length > 0 ? (_jsx(Ul, { className: "divide-y rounded-lg border", style: { borderColor: "var(--border-ink)" }, children: pins.map((pin, i) => (_jsx(Li, { className: "px-4 py-3", children: _jsxs(Row, { gap: "sm", children: [_jsx(Span, { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white", style: { background: pin.accent || "#E8001C" }, children: i + 1 }), _jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "truncate text-sm font-bold", children: pin.name || (_jsx(Span, { className: "italic", style: { color: "var(--color-muted)" }, children: "Unnamed" })) }), _jsxs(Text, { className: "text-xs", style: { color: "var(--color-muted)" }, children: [pin.universe, " \u00B7 ", pin.xPct.toFixed(0), "%,", " ", pin.yPct.toFixed(0), "%"] })] }), _jsx(Button, { type: "button", onClick: () => deletePin(pin.id), variant: "ghost", className: "shrink-0 rounded p-1 text-xs text-red-500 hover:bg-red-50", title: "Remove pin", children: "\u2715" })] }) }, pin.id))) })) : (_jsx(Div, { className: "rounded-lg border-2 border-dashed p-8 text-center text-sm", style: {
                             borderColor: "var(--border-ink)",
                             color: "var(--color-muted)",
-                        }, children: "No pins yet \u2014 add some using the button below." })), _jsxs("details", { className: "rounded-lg border p-3", style: { borderColor: "var(--border-ink)" }, children: [_jsx("summary", { className: "cursor-pointer text-sm font-medium", children: "Image Settings" }), _jsxs(Div, { className: "mt-3 space-y-3", children: [_jsxs(Label, { className: "inline-flex cursor-pointer items-center gap-2 rounded border-2 border-dashed px-3 py-1.5 text-sm font-medium transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [uploading ? "Uploading…" : "Replace Image", _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                        }, children: "No pins yet \u2014 add some using the button below." })), _jsxs("details", { className: "rounded-lg border p-3", style: { borderColor: "var(--border-ink)" }, children: [_jsx("summary", { className: "cursor-pointer text-sm font-medium", children: "Image Settings" }), _jsxs(Div, { className: "mt-3 space-y-3", children: [_jsxs(Label, { className: "inline-flex cursor-pointer items-center gap-2 rounded border-2 border-dashed px-3 py-1.5 text-sm font-medium transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [uploading ? "Uploading…" : "Replace Image", _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), className: CLS_INPUT, style: {
                                                     borderColor: "var(--border-ink)",
                                                     background: "var(--surface-elevated)",
                                                     color: "var(--color-black)",
@@ -301,7 +306,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                 }, variant: "outline", className: "px-4 py-2 text-sm font-bold rounded transition-opacity", style: {
                                     background: "var(--surface-warm)",
                                     color: "var(--color-black)",
-                                    border: "2px solid var(--border-ink)",
+                                    border: STY_BORDER_INK,
                                 }, children: "+ Add Another Pin" }), _jsx(Button, { type: "button", onClick: handleSave, disabled: !imageUrl || saving || pins.length === 0, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
                                     background: "var(--color-black)",
                                     color: "var(--color-yellow)",

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading, HorizontalScroller, Section } from "../../../ui";
+import { Heading, HorizontalScroller, Section, Text } from "../../../ui";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { SectionCarousel } from "./SectionCarousel";
 import { MediaImage } from "../../media/MediaImage";
+// --- Constants ---------------------------------------------------------------
+const CLS_CONTAINER = "w-full max-w-7xl mx-auto px-4";
 // --- Helpers -----------------------------------------------------------------
 const COLS_CLASS = {
     1: "grid-cols-1",
@@ -39,7 +41,7 @@ function CardItem({ card }) {
         cardStyle.backgroundColor = card.backgroundColor;
     if (card.textColor)
         cardStyle.color = card.textColor;
-    return (_jsxs("div", { className: `flex flex-col overflow-hidden ${radiusClass} ${shadowClass} bg-[var(--appkit-color-surface)]`, style: cardStyle, children: [card.image && (_jsx("div", { className: "relative w-full aspect-video overflow-hidden", children: _jsx(MediaImage, { src: card.image, alt: card.imageAlt ?? "", size: "card" }) })), _jsxs("div", { className: "flex flex-col gap-2 p-4 flex-1", children: [card.eyebrow && (_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest opacity-70", children: card.eyebrow })), card.title && (_jsx("p", { className: "text-base font-bold leading-snug", children: card.title })), card.body && (_jsx("p", { className: "text-sm opacity-80 leading-relaxed flex-1", children: card.body })), card.buttons && card.buttons.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: card.buttons.map((btn, i) => (_jsx("a", { href: btn.href, target: btn.target ?? "_self", rel: btn.target === "_blank" ? "noopener noreferrer" : undefined, className: VARIANT_CLASS[btn.variant] ?? VARIANT_CLASS.primary, children: btn.label }, i))) })), card.formEmbed && (_jsx("iframe", { src: card.formEmbed, sandbox: "allow-forms allow-scripts", loading: "lazy", className: "w-full mt-3 border-0 rounded-md", style: { minHeight: "200px" }, title: "Embedded form" }))] })] }));
+    return (_jsxs("div", { className: `flex flex-col overflow-hidden ${radiusClass} ${shadowClass} bg-[var(--appkit-color-surface)]`, style: cardStyle, children: [card.image && (_jsx("div", { className: "relative w-full aspect-video overflow-hidden", children: _jsx(MediaImage, { src: card.image, alt: card.imageAlt ?? "", size: "card" }) })), _jsxs("div", { className: "flex flex-col gap-2 p-4 flex-1", children: [card.eyebrow && (_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest opacity-70", children: card.eyebrow })), card.title && (_jsx(Text, { className: "text-base font-bold leading-snug", children: card.title })), card.body && (_jsx(Text, { className: "text-sm opacity-80 leading-relaxed flex-1", children: card.body })), card.buttons && card.buttons.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: card.buttons.map((btn, i) => (_jsx("a", { href: btn.href, target: btn.target ?? "_self", rel: btn.target === "_blank" ? "noopener noreferrer" : undefined, className: VARIANT_CLASS[btn.variant] ?? VARIANT_CLASS.primary, children: btn.label }, i))) })), card.formEmbed && (_jsx("iframe", { src: card.formEmbed, sandbox: "allow-forms allow-scripts", loading: "lazy", className: "w-full mt-3 border-0 rounded-md", style: { minHeight: "200px" }, title: "Embedded form" }))] })] }));
 }
 // --- Section Header ----------------------------------------------------------
 function SectionHeader({ title }) {
@@ -55,11 +57,11 @@ export function CustomCardsSection(config) {
         return null;
     // autoScroll: wrap all cards in SectionCarousel (client carousel)
     if (autoScroll) {
-        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto px-4", children: _jsx(SectionCarousel, { title: title ?? "", items: cards, renderItem: (card) => _jsx(CardItem, { card: card }), keyExtractor: (card) => card.id, autoScroll: true, autoScrollInterval: scrollIntervalMs ?? 3500, perView: { base: 1, sm: 2, md: columns } }) }) }));
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsx("div", { className: CLS_CONTAINER, children: _jsx(SectionCarousel, { title: title ?? "", items: cards, renderItem: (card) => _jsx(CardItem, { card: card }), keyExtractor: (card) => card.id, autoScroll: true, autoScrollInterval: scrollIntervalMs ?? 3500, perView: { base: 1, sm: 2, md: columns } }) }) }));
     }
     // Row layout: horizontal scroller
     if (layout === "row") {
-        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, children: cards.map((card) => (_jsx("div", { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, children: cards.map((card) => (_jsx("div", { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
     }
     // Masonry layout: CSS columns
     if (layout === "masonry") {
@@ -68,9 +70,9 @@ export function CustomCardsSection(config) {
             .split(" ")
             .map((c) => c.replace("grid-cols-", "columns-"))
             .join(" ");
-        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsx(SectionHeader, { title: title }), _jsx("div", { className: `${masonryClass} gap-4 space-y-4`, children: cards.map((card) => (_jsx("div", { className: "break-inside-avoid", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx("div", { className: `${masonryClass} gap-4 space-y-4`, children: cards.map((card) => (_jsx("div", { className: "break-inside-avoid", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
     }
     // Grid layout (default)
     const colsClass = COLS_CLASS[columns] ?? COLS_CLASS[3];
-    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsx(SectionHeader, { title: title }), _jsx("div", { className: `grid ${colsClass} gap-4`, children: cards.map((card) => (_jsx(CardItem, { card: card }, card.id))) })] }) }));
+    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx("div", { className: `grid ${colsClass} gap-4`, children: cards.map((card) => (_jsx(CardItem, { card: card }, card.id))) })] }) }));
 }

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { SectionCarousel } from "./SectionCarousel";
@@ -32,7 +32,7 @@ function ProductGrid({ items, rows, maxItems, pagination, viewMoreHref, viewMore
         return () => { if (timerRef.current)
             clearInterval(timerRef.current); };
     }, [pagination, pageSize, totalItems]);
-    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgPrimary}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), description && (_jsx(Text, { variant: "muted", className: "mt-1 text-sm", children: description }))] }), pagination === "arrows" && (_jsxs("div", { className: "flex shrink-0 gap-2", children: [_jsx("button", { type: "button", onClick: prev, disabled: !canPrev, "aria-label": "Previous", className: "flex h-9 w-9 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-600 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] disabled:opacity-40 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300", children: "\u2039" }), _jsx("button", { type: "button", onClick: next, disabled: !canNext, "aria-label": "Next", className: "flex h-9 w-9 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-600 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] disabled:opacity-40 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300", children: "\u203A" })] }))] }), _jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", children: visible.map((product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id ?? "")) }, product.id))) }), pagination === "load-more" && canNext && (_jsx("div", { className: "mt-8 text-center", children: _jsx("button", { type: "button", onClick: next, className: "rounded-lg border border-zinc-300 bg-white px-6 py-2 text-sm font-medium text-zinc-700 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] dark:border-slate-600 dark:bg-slate-900 dark:text-zinc-300", children: "Load more" }) })), viewMoreHref && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
+    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgPrimary}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-end justify-between gap-4", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), description && (_jsx(Text, { variant: "muted", className: "mt-1 text-sm", children: description }))] }), pagination === "arrows" && (_jsxs("div", { className: "flex shrink-0 gap-2", children: [_jsx("button", { type: "button", onClick: prev, disabled: !canPrev, "aria-label": "Previous", className: "flex h-9 w-9 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-600 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] disabled:opacity-40 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300", children: "\u2039" }), _jsx("button", { type: "button", onClick: next, disabled: !canNext, "aria-label": "Next", className: "flex h-9 w-9 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-600 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] disabled:opacity-40 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300", children: "\u203A" })] }))] }), _jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", children: visible.map((product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id ?? "")) }, product.id))) }), pagination === "load-more" && canNext && (_jsx("div", { className: "mt-8 text-center", children: _jsx("button", { type: "button", onClick: next, className: "rounded-lg border border-zinc-300 bg-white px-6 py-2 text-sm font-medium text-zinc-700 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] dark:border-slate-600 dark:bg-slate-900 dark:text-zinc-300", children: "Load more" }) })), viewMoreHref && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
 }
 // --- Main component -----------------------------------------------------------
 export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", filterByBrand, initialItems, rows = 1, maxItems, pagination = "load-more", }) {