@kasuvia/sdk 0.0.8 → 0.0.9

package/src/components/shared/ImageViewerModal.tsx

@@ -0,0 +1,598 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { createPortal } from "react-dom";
+import { motion, AnimatePresence, useMotionValue } from "framer-motion";
+import { useGesture } from "@use-gesture/react";
+import {
+  X,
+  ChevronLeft,
+  ChevronRight,
+  ZoomIn,
+  ZoomOut,
+  RotateCw,
+  Maximize,
+  Minimize,
+  RefreshCcw,
+} from "lucide-react";
+import { logger } from "../../utils/logger";
+import SmartImage from "./SmartImage";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface ImageViewerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  images?: string[];
+  selectedImage: number;
+  setSelectedImage: (index: number) => void;
+  productName: string;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * ImageViewerModal — Self-contained full-screen product image viewer.
+ *
+ * Designed to work standalone across any application (kasuvia-storefront, kasuvia, etc.)
+ * with zero reliance on external CSS purging or Tailwind utility scanning.
+ */
+export function ImageViewerModal({
+  isOpen,
+  onClose,
+  images = [],
+  selectedImage,
+  setSelectedImage,
+  productName,
+}: ImageViewerModalProps) {
+  // Motion Values for fluid gestures
+  const scale = useMotionValue(1);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const rotation = useMotionValue(0);
+
+  const [mounted, setMounted] = useState(false);
+  const [isZoomed, setIsZoomed] = useState(false);
+  const [currentZoomLevel, setCurrentZoomLevel] = useState(1);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [mainImgLoaded, setMainImgLoaded] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const prevSelectedImageRef = useRef(selectedImage);
+  const prevIsOpenRef = useRef(isOpen);
+
+  // SSR Portal safety check
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Reset zoom & pan when image changes or modal opens
+  useEffect(() => {
+    if (prevSelectedImageRef.current !== selectedImage || prevIsOpenRef.current !== isOpen) {
+      setIsZoomed(false);
+      setCurrentZoomLevel(1);
+      setMainImgLoaded(false);
+      prevSelectedImageRef.current = selectedImage;
+      prevIsOpenRef.current = isOpen;
+    }
+    scale.set(1);
+    x.set(0);
+    y.set(0);
+    rotation.set(0);
+  }, [selectedImage, isOpen, scale, x, y, rotation]);
+
+  const handleNext = useCallback(() => {
+    if (!images.length) return;
+    setSelectedImage((selectedImage + 1) % images.length);
+  }, [selectedImage, images.length, setSelectedImage]);
+
+  const handlePrev = useCallback(() => {
+    if (!images.length) return;
+    setSelectedImage((selectedImage - 1 + images.length) % images.length);
+  }, [selectedImage, images.length, setSelectedImage]);
+
+  const handleZoomIn = useCallback(() => {
+    const next = Math.min(scale.get() + 0.5, 4);
+    scale.set(next);
+    setCurrentZoomLevel(next);
+    setIsZoomed(next > 1);
+  }, [scale]);
+
+  const handleZoomOut = useCallback(() => {
+    const next = Math.max(scale.get() - 0.5, 1);
+    scale.set(next);
+    setCurrentZoomLevel(next);
+    setIsZoomed(next > 1);
+    if (next === 1) {
+      x.set(0);
+      y.set(0);
+    }
+  }, [scale, x, y]);
+
+  const handleRotate = useCallback(() => {
+    rotation.set(rotation.get() + 90);
+  }, [rotation]);
+
+  const handleReset = useCallback(() => {
+    scale.set(1);
+    x.set(0);
+    y.set(0);
+    rotation.set(0);
+    setCurrentZoomLevel(1);
+    setIsZoomed(false);
+  }, [scale, x, y, rotation]);
+
+  const toggleFullscreen = useCallback(() => {
+    if (!containerRef.current) return;
+    if (!document.fullscreenElement) {
+      containerRef.current.requestFullscreen().catch((err: Error) => {
+        logger.error(`Error attempting to enable full-screen mode: ${err.message}`);
+      });
+    } else {
+      document.exitFullscreen().catch(() => {});
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+
+  // Keyboard navigation & body scroll lock
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+      if (e.key === "ArrowLeft") handlePrev();
+      if (e.key === "ArrowRight") handleNext();
+      if (e.key === "+" || e.key === "=") handleZoomIn();
+      if (e.key === "-") handleZoomOut();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, onClose, handleNext, handlePrev, handleZoomIn, handleZoomOut]);
+
+  // Gestures for pan, pinch, swipe, double-tap
+  const bind = useGesture(
+    {
+      onDrag: ({ down, movement: [mx], offset: [ox, oy] }) => {
+        if (scale.get() > 1) {
+          if (down) {
+            x.set(ox);
+            y.set(oy);
+          }
+        } else {
+          if (!down) {
+            if (mx < -60) handleNext();
+            else if (mx > 60) handlePrev();
+          }
+        }
+      },
+      onPinch: ({ offset: [s] }) => {
+        scale.set(s);
+        setCurrentZoomLevel(s);
+        setIsZoomed(s > 1);
+        if (s <= 1) {
+          x.set(0);
+          y.set(0);
+        }
+      },
+      onWheel: ({ delta: [, dy], ctrlKey }) => {
+        if (ctrlKey) {
+          const next = Math.min(Math.max(1, scale.get() - dy / 100), 4);
+          scale.set(next);
+          setCurrentZoomLevel(next);
+          setIsZoomed(next > 1);
+        }
+      },
+      onDoubleClick: ({ event }) => {
+        event.stopPropagation();
+        if (scale.get() > 1) {
+          handleReset();
+        } else {
+          scale.set(2.5);
+          setCurrentZoomLevel(2.5);
+          setIsZoomed(true);
+        }
+      },
+    },
+    {
+      drag: { from: () => [x.get(), y.get()], threshold: 10 },
+      pinch: { scaleBounds: { min: 1, max: 4 }, modifierKey: null },
+    }
+  );
+
+  if (!images.length) return null;
+
+  const btnStyle: React.CSSProperties = {
+    background: "rgba(255, 255, 255, 0.1)",
+    border: "none",
+    borderRadius: "9999px",
+    padding: "8px",
+    color: "rgba(255, 255, 255, 0.9)",
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background-color 0.15s ease, color 0.15s ease",
+  };
+
+  const navBtnStyle: React.CSSProperties = {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    background: "rgba(0, 0, 0, 0.6)",
+    border: "1px solid rgba(255, 255, 255, 0.2)",
+    borderRadius: "9999px",
+    padding: "14px",
+    color: "#ffffff",
+    cursor: "pointer",
+    backdropFilter: "blur(8px)",
+    zIndex: 40,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "0 10px 25px rgba(0, 0, 0, 0.5)",
+    transition: "transform 0.15s ease, background-color 0.15s ease",
+  };
+
+  const modalContent = (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          ref={containerRef}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.15, ease: "easeOut" }}
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: "100vw",
+            height: "100vh",
+            zIndex: 99999,
+            backgroundColor: "#000000",
+            display: "flex",
+            flexDirection: "column",
+            userSelect: "none",
+            WebkitUserSelect: "none",
+            overflow: "hidden",
+            boxSizing: "border-box",
+          }}
+          className="fixed inset-0 z-[99999] bg-black flex flex-col select-none overflow-hidden"
+          onClick={onClose}
+          role="dialog"
+          aria-modal="true"
+          aria-label={`${productName} image viewer`}
+        >
+          {/* ── Top Header Toolbar ────────────────────────────────────────────── */}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "12px 20px",
+              zIndex: 50,
+              color: "#ffffff",
+              background: "linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0))",
+              flexShrink: 0,
+              width: "100%",
+              boxSizing: "border-box",
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+              <span
+                style={{
+                  fontSize: "13px",
+                  fontWeight: 500,
+                  letterSpacing: "0.08em",
+                  color: "rgba(255, 255, 255, 0.9)",
+                  backgroundColor: "rgba(255, 255, 255, 0.12)",
+                  padding: "4px 12px",
+                  borderRadius: "9999px",
+                  border: "1px solid rgba(255, 255, 255, 0.15)",
+                }}
+              >
+                {selectedImage + 1} / {images.length}
+              </span>
+              {productName && (
+                <span
+                  style={{
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    color: "rgba(255, 255, 255, 0.7)",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    maxWidth: "300px",
+                  }}
+                  className="hidden sm:inline"
+                >
+                  {productName}
+                </span>
+              )}
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              {currentZoomLevel > 1 && (
+                <span
+                  style={{
+                    fontSize: "11px",
+                    fontFamily: "monospace",
+                    color: "rgba(255, 255, 255, 0.7)",
+                    marginRight: "4px",
+                  }}
+                  className="hidden sm:inline"
+                >
+                  {Math.round(currentZoomLevel * 100)}%
+                </span>
+              )}
+
+              <button
+                type="button"
+                onClick={handleZoomOut}
+                style={btnStyle}
+                title="Zoom Out (-)"
+                onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.25)")}
+                onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)")}
+              >
+                <ZoomOut className="w-5 h-5" style={{ width: "20px", height: "20px" }} />
+              </button>
+              <button
+                type="button"
+                onClick={handleZoomIn}
+                style={btnStyle}
+                title="Zoom In (+)"
+                onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.25)")}
+                onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)")}
+              >
+                <ZoomIn className="w-5 h-5" style={{ width: "20px", height: "20px" }} />
+              </button>
+              <button
+                type="button"
+                onClick={handleRotate}
+                style={btnStyle}
+                title="Rotate 90°"
+                onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.25)")}
+                onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)")}
+              >
+                <RotateCw className="w-5 h-5" style={{ width: "20px", height: "20px" }} />
+              </button>
+              <button
+                type="button"
+                onClick={handleReset}
+                style={btnStyle}
+                title="Reset View"
+                onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.25)")}
+                onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)")}
+              >
+                <RefreshCcw className="w-5 h-5" style={{ width: "20px", height: "20px" }} />
+              </button>
+
+              <div style={{ width: "1px", height: "20px", backgroundColor: "rgba(255,255,255,0.2)", margin: "0 6px" }} />
+
+              <button
+                type="button"
+                onClick={toggleFullscreen}
+                style={btnStyle}
+                title={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
+                onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.25)")}
+                onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)")}
+              >
+                {isFullscreen ? (
+                  <Minimize className="w-5 h-5" style={{ width: "20px", height: "20px" }} />
+                ) : (
+                  <Maximize className="w-5 h-5" style={{ width: "20px", height: "20px" }} />
+                )}
+              </button>
+
+              <div style={{ width: "1px", height: "20px", backgroundColor: "rgba(255,255,255,0.2)", margin: "0 6px" }} />
+
+              <button
+                type="button"
+                onClick={onClose}
+                style={{
+                  ...btnStyle,
+                  backgroundColor: "rgba(239, 68, 68, 0.25)",
+                  color: "#f87171",
+                }}
+                title="Close (Esc)"
+                aria-label="Close viewer"
+                onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "rgba(239, 68, 68, 0.45)")}
+                onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "rgba(239, 68, 68, 0.25)")}
+              >
+                <X className="w-6 h-6" style={{ width: "24px", height: "24px" }} />
+              </button>
+            </div>
+          </div>
+
+          {/* ── Main Display Viewport ────────────────────────────────────────── */}
+          <div
+            style={{
+              flex: 1,
+              position: "relative",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "100%",
+              height: "100%",
+              minHeight: 0,
+              overflow: "hidden",
+              touchAction: "none",
+            }}
+            {...bind()}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <motion.div
+              style={{
+                scale,
+                rotate: rotation,
+                x,
+                y,
+                cursor: isZoomed ? "grab" : "default",
+                width: "100%",
+                height: "100%",
+                padding: "16px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                boxSizing: "border-box",
+              }}
+              className="will-change-transform"
+            >
+              {/* Loading indicator */}
+              {!mainImgLoaded && (
+                <div
+                  style={{
+                    position: "absolute",
+                    inset: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 10,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: "160px",
+                      height: "160px",
+                      borderRadius: "16px",
+                      backgroundColor: "rgba(255,255,255,0.05)",
+                      border: "1px solid rgba(255,255,255,0.1)",
+                    }}
+                  />
+                </div>
+              )}
+
+              <motion.img
+                key={images[selectedImage]}
+                src={images[selectedImage] ?? undefined}
+                alt={`${productName} - Image ${selectedImage + 1}`}
+                style={{
+                  maxWidth: "100%",
+                  maxHeight: "100%",
+                  objectFit: "contain",
+                  userSelect: "none",
+                  WebkitUserSelect: "none",
+                  display: "block",
+                  margin: "auto",
+                  opacity: mainImgLoaded ? 1 : 0,
+                  transition: "opacity 0.25s ease-out",
+                  boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.8)",
+                }}
+                draggable={false}
+                onLoad={() => setMainImgLoaded(true)}
+                onDragStart={(e) => e.preventDefault()}
+                onMouseDown={(e) => e.preventDefault()}
+              />
+            </motion.div>
+
+            {/* ── Navigation Chevrons ────────────────────────────────────────── */}
+            {images.length > 1 && (
+              <>
+                <button
+                  type="button"
+                  aria-label="Previous image"
+                  style={{ ...navBtnStyle, left: "24px" }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePrev();
+                  }}
+                  onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.85)")}
+                  onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.6)")}
+                >
+                  <ChevronLeft className="w-8 h-8" style={{ width: "32px", height: "32px" }} />
+                </button>
+
+                <button
+                  type="button"
+                  aria-label="Next image"
+                  style={{ ...navBtnStyle, right: "24px" }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleNext();
+                  }}
+                  onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.85)")}
+                  onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.6)")}
+                >
+                  <ChevronRight className="w-8 h-8" style={{ width: "32px", height: "32px" }} />
+                </button>
+              </>
+            )}
+          </div>
+
+          {/* ── Bottom Thumbnail Toolbar ────────────────────────────────────── */}
+          {images.length > 1 && (
+            <div
+              style={{
+                padding: "16px 20px",
+                zIndex: 50,
+                background: "linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0))",
+                display: "flex",
+                justifyContent: "center",
+                flexShrink: 0,
+                width: "100%",
+                boxSizing: "border-box",
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  gap: "12px",
+                  overflowX: "auto",
+                  maxWidth: "100%",
+                  paddingBottom: "4px",
+                }}
+              >
+                {images.map((img, idx) => (
+                  <button
+                    key={idx}
+                    type="button"
+                    onClick={() => setSelectedImage(idx)}
+                    aria-label={`View image ${idx + 1}`}
+                    style={{
+                      position: "relative",
+                      width: "60px",
+                      height: "60px",
+                      borderRadius: "10px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      border: selectedImage === idx ? "2px solid #ffffff" : "2px solid rgba(255, 255, 255, 0.2)",
+                      opacity: selectedImage === idx ? 1 : 0.5,
+                      cursor: "pointer",
+                      transform: selectedImage === idx ? "scale(1.05)" : "scale(1)",
+                      transition: "all 0.2s ease",
+                      background: "none",
+                      padding: 0,
+                    }}
+                  >
+                    <SmartImage
+                      src={img}
+                      alt={`Thumbnail ${idx + 1}`}
+                      className="w-full h-full object-cover"
+                    />
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+
+  if (!mounted) return null;
+  return createPortal(modalContent, document.body);
+}
+
+export default ImageViewerModal;

package/src/components/shared/LucideReactIcon.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React from "react";
+import { LucideProps } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+
+const toPascalCase = (str: string): string => {
+  return str
+    .replace(/[-_]+/g, " ")
+    .replace(/\s+(.)/g, (_, c) => c.toUpperCase())
+    .replace(/^(.)/, (_, c) => c.toUpperCase());
+};
+
+export interface LucideReactIconProps extends LucideProps {
+  icon: string | number | boolean | null | undefined | object;
+}
+
+export const LucideReactIcon: React.FC<LucideReactIconProps> = ({ icon, ...props }) => {
+  if (!icon || typeof icon === "boolean" || typeof icon === "number" || Array.isArray(icon)) {
+    return null;
+  }
+
+  if (typeof icon === "function" || (typeof icon === "object" && icon !== null && ("$$typeof" in icon || "render" in icon))) {
+    const Component = icon as React.ComponentType<LucideProps>;
+    return <Component size={props.size ?? 24} color={props.color ?? "currentColor"} strokeWidth={props.strokeWidth ?? 2} {...props} />;
+  }
+
+  const iconObj = typeof icon === "object" && icon !== null ? (icon as Record<string, unknown>) : null;
+  const rawName = typeof icon === "string" ? icon : (typeof iconObj?.name === "string" ? iconObj.name : typeof iconObj?.icon === "string" ? iconObj.icon : null);
+  if (!rawName) return null;
+
+  const pascalName = toPascalCase(rawName);
+  const IconComponent = (LucideIcons as unknown as Record<string, React.ComponentType<LucideProps>>)[pascalName] || (LucideIcons as unknown as Record<string, React.ComponentType<LucideProps>>)[rawName];
+
+  if (!IconComponent) {
+    return (
+      <span
+        style={{
+          fontSize: props.size ?? 24,
+          color: props.color ?? "currentColor",
+        }}
+        className="flex items-center justify-center text-xs font-medium text-center break-all leading-tight"
+      >
+        {rawName}
+      </span>
+    );
+  }
+
+  return <IconComponent size={props.size ?? 24} color={props.color ?? "currentColor"} strokeWidth={props.strokeWidth ?? 2} {...props} />;
+};
+
+export default LucideReactIcon;