@qwanyx/carousel 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1079 @@
+// src/components/Carousel.tsx
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef as useRef3,
+  useState as useState2,
+  useCallback as useCallback2,
+  useEffect as useEffect3
+} from "react";
+
+// src/hooks/useCarousel.ts
+import { useState, useCallback, useEffect, useRef } from "react";
+function useCarousel({
+  slides,
+  initialIndex = 0,
+  loop = false,
+  autoplay = false,
+  onSlideChange
+}) {
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [direction, setDirection] = useState("next");
+  const autoplayTimerRef = useRef(null);
+  const interactionRef = useRef(false);
+  const totalSlides = slides.length;
+  const currentSlide = slides[currentIndex];
+  const autoplayOptions = typeof autoplay === "boolean" ? { enabled: autoplay, interval: 5e3, pauseOnHover: true, pauseOnInteraction: true } : { interval: 5e3, pauseOnHover: true, pauseOnInteraction: true, ...autoplay };
+  const next = useCallback(() => {
+    setDirection("next");
+    setCurrentIndex((prev2) => {
+      if (prev2 >= totalSlides - 1) {
+        return loop ? 0 : prev2;
+      }
+      return prev2 + 1;
+    });
+  }, [totalSlides, loop]);
+  const prev = useCallback(() => {
+    setDirection("prev");
+    setCurrentIndex((prev2) => {
+      if (prev2 <= 0) {
+        return loop ? totalSlides - 1 : prev2;
+      }
+      return prev2 - 1;
+    });
+  }, [totalSlides, loop]);
+  const goTo = useCallback((index) => {
+    if (index < 0 || index >= totalSlides) return;
+    setDirection(index > currentIndex ? "next" : "prev");
+    setCurrentIndex(index);
+  }, [currentIndex, totalSlides]);
+  const canGoNext = loop || currentIndex < totalSlides - 1;
+  const canGoPrev = loop || currentIndex > 0;
+  const play = useCallback(() => {
+    setIsPlaying(true);
+  }, []);
+  const pause = useCallback(() => {
+    setIsPlaying(false);
+  }, []);
+  const handleInteraction = useCallback(() => {
+    if (autoplayOptions.pauseOnInteraction) {
+      interactionRef.current = true;
+      setTimeout(() => {
+        interactionRef.current = false;
+      }, 3e3);
+    }
+  }, [autoplayOptions.pauseOnInteraction]);
+  useEffect(() => {
+    onSlideChange?.(currentIndex, slides[currentIndex]);
+  }, [currentIndex, slides, onSlideChange]);
+  useEffect(() => {
+    if (autoplayOptions.enabled) {
+      setIsPlaying(true);
+    }
+  }, [autoplayOptions.enabled]);
+  useEffect(() => {
+    if (!isPlaying || interactionRef.current) {
+      if (autoplayTimerRef.current) {
+        clearInterval(autoplayTimerRef.current);
+        autoplayTimerRef.current = null;
+      }
+      return;
+    }
+    const slideDuration = currentSlide?.duration || autoplayOptions.interval || 5e3;
+    autoplayTimerRef.current = setInterval(() => {
+      if (!interactionRef.current) {
+        next();
+      }
+    }, slideDuration);
+    return () => {
+      if (autoplayTimerRef.current) {
+        clearInterval(autoplayTimerRef.current);
+      }
+    };
+  }, [isPlaying, currentSlide, autoplayOptions.interval, next]);
+  return {
+    currentIndex,
+    currentSlide,
+    totalSlides,
+    direction,
+    isPlaying,
+    canGoNext,
+    canGoPrev,
+    next,
+    prev,
+    goTo,
+    play,
+    pause,
+    handleInteraction
+  };
+}
+
+// src/components/SlideRenderer.tsx
+import { useRef as useRef2, useEffect as useEffect2 } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function getPositionStyle(position) {
+  return {
+    left: `${position.x}%`,
+    top: `${position.y}%`
+  };
+}
+function getSizeStyle(size) {
+  if (!size) return {};
+  const unit = size.unit === "px" ? "px" : "%";
+  return {
+    width: `${size.width}${unit}`,
+    height: `${size.height}${unit}`
+  };
+}
+function getTransformStyle(transform) {
+  if (!transform) return {};
+  const transforms = [];
+  if (transform.rotation) {
+    transforms.push(`rotate(${transform.rotation}deg)`);
+  }
+  if (transform.scaleX !== void 0 || transform.scaleY !== void 0) {
+    const sx = transform.scaleX ?? 1;
+    const sy = transform.scaleY ?? 1;
+    transforms.push(`scale(${sx}, ${sy})`);
+  }
+  if (transform.skewX || transform.skewY) {
+    transforms.push(`skew(${transform.skewX || 0}deg, ${transform.skewY || 0}deg)`);
+  }
+  const style = {};
+  if (transforms.length > 0) {
+    style.transform = transforms.join(" ");
+  }
+  if (transform.originX !== void 0 || transform.originY !== void 0) {
+    style.transformOrigin = `${transform.originX ?? 50}% ${transform.originY ?? 50}%`;
+  }
+  return style;
+}
+function getObjectStyle(obj) {
+  return {
+    position: "absolute",
+    ...getPositionStyle(obj.position),
+    ...getSizeStyle(obj.size),
+    ...getTransformStyle(obj.transform),
+    opacity: obj.opacity ?? 1,
+    visibility: obj.visible === false ? "hidden" : "visible",
+    pointerEvents: obj.locked ? "none" : "auto",
+    ...obj.style
+  };
+}
+function BackgroundRenderer({ background }) {
+  if (!background) return null;
+  const style = {
+    position: "absolute",
+    inset: 0,
+    zIndex: 0
+  };
+  switch (background.type) {
+    case "color":
+      style.backgroundColor = background.value;
+      break;
+    case "gradient":
+      style.background = background.value;
+      break;
+    case "image":
+      style.backgroundImage = `url(${background.value})`;
+      style.backgroundSize = "cover";
+      style.backgroundPosition = "center";
+      break;
+    case "video":
+      return /* @__PURE__ */ jsxs("div", { style, children: [
+        /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: background.value,
+            autoPlay: true,
+            muted: true,
+            loop: true,
+            playsInline: true,
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }
+        ),
+        background.overlay && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundColor: background.overlay
+            }
+          }
+        )
+      ] });
+  }
+  if (background.opacity !== void 0) {
+    style.opacity = background.opacity;
+  }
+  if (background.blur) {
+    style.filter = `blur(${background.blur}px)`;
+  }
+  if (background.overlay) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { style }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            backgroundColor: background.overlay,
+            zIndex: 0
+          }
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { style });
+}
+function ImageObjectRenderer({
+  obj,
+  isActive
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `qc-object qc-object--image ${obj.className || ""}`, style: getObjectStyle(obj), children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: obj.src,
+      alt: obj.alt || "",
+      loading: isActive ? "eager" : "lazy",
+      style: {
+        width: "100%",
+        height: "100%",
+        objectFit: obj.objectFit || "contain",
+        objectPosition: obj.objectPosition || "center",
+        borderRadius: obj.borderRadius,
+        border: obj.border,
+        boxShadow: obj.shadow,
+        filter: obj.filter
+      }
+    }
+  ) });
+}
+function VideoObjectRenderer({
+  obj,
+  isActive
+}) {
+  const videoRef = useRef2(null);
+  useEffect2(() => {
+    if (videoRef.current) {
+      if (isActive && obj.autoplay) {
+        videoRef.current.play().catch(() => {
+        });
+      } else if (!isActive) {
+        videoRef.current.pause();
+      }
+    }
+  }, [isActive, obj.autoplay]);
+  return /* @__PURE__ */ jsx("div", { className: `qc-object qc-object--video ${obj.className || ""}`, style: getObjectStyle(obj), children: /* @__PURE__ */ jsx(
+    "video",
+    {
+      ref: videoRef,
+      src: obj.src,
+      poster: obj.poster,
+      muted: obj.muted ?? true,
+      loop: obj.loop ?? false,
+      controls: obj.controls ?? true,
+      playsInline: true,
+      style: {
+        width: "100%",
+        height: "100%",
+        objectFit: obj.objectFit || "contain"
+      }
+    }
+  ) });
+}
+function TextObjectRenderer({ obj }) {
+  const textStyle = {
+    fontSize: obj.fontSize ? `${obj.fontSize}px` : void 0,
+    fontFamily: obj.fontFamily,
+    fontWeight: obj.fontWeight,
+    fontStyle: obj.fontStyle,
+    textAlign: obj.textAlign,
+    color: obj.color,
+    backgroundColor: obj.backgroundColor,
+    lineHeight: obj.lineHeight,
+    letterSpacing: obj.letterSpacing ? `${obj.letterSpacing}px` : void 0,
+    textShadow: obj.textShadow,
+    padding: obj.padding,
+    display: "flex",
+    alignItems: obj.verticalAlign === "middle" ? "center" : obj.verticalAlign === "bottom" ? "flex-end" : "flex-start",
+    justifyContent: obj.textAlign === "center" ? "center" : obj.textAlign === "right" ? "flex-end" : "flex-start"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `qc-object qc-object--text ${obj.className || ""}`,
+      style: { ...getObjectStyle(obj), ...textStyle },
+      children: obj.content
+    }
+  );
+}
+function AudioObjectRenderer({
+  obj,
+  isActive
+}) {
+  const audioRef = useRef2(null);
+  useEffect2(() => {
+    if (audioRef.current) {
+      if (isActive && obj.autoplay) {
+        audioRef.current.play().catch(() => {
+        });
+      } else if (!isActive) {
+        audioRef.current.pause();
+      }
+      if (obj.volume !== void 0) {
+        audioRef.current.volume = obj.volume;
+      }
+    }
+  }, [isActive, obj.autoplay, obj.volume]);
+  if (!obj.showControls && !obj.showWaveform) {
+    return /* @__PURE__ */ jsx(
+      "audio",
+      {
+        ref: audioRef,
+        src: obj.src,
+        loop: obj.loop,
+        style: { display: "none" }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: `qc-object qc-object--audio ${obj.className || ""}`, style: getObjectStyle(obj), children: obj.showControls && /* @__PURE__ */ jsx("audio", { ref: audioRef, src: obj.src, loop: obj.loop, controls: true, style: { width: "100%" } }) });
+}
+function ShapeObjectRenderer({ obj }) {
+  const style = getObjectStyle(obj);
+  const shapeStyle = {
+    backgroundColor: obj.fill,
+    border: obj.stroke ? `${obj.strokeWidth || 1}px solid ${obj.stroke}` : void 0,
+    borderRadius: obj.borderRadius
+  };
+  switch (obj.shape) {
+    case "circle":
+      shapeStyle.borderRadius = "50%";
+      break;
+    case "ellipse":
+      shapeStyle.borderRadius = "50%";
+      break;
+    case "triangle":
+      return /* @__PURE__ */ jsx("div", { className: `qc-object qc-object--shape ${obj.className || ""}`, style, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: "50,0 100,100 0,100",
+          fill: obj.fill || "transparent",
+          stroke: obj.stroke,
+          strokeWidth: obj.strokeWidth || 1
+        }
+      ) }) });
+    case "line":
+    case "arrow":
+      return /* @__PURE__ */ jsx("div", { className: `qc-object qc-object--shape ${obj.className || ""}`, style, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", style: { width: "100%", height: "100%" }, children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: obj.startPoint?.x ?? 0,
+            y1: obj.startPoint?.y ?? 50,
+            x2: obj.endPoint?.x ?? 100,
+            y2: obj.endPoint?.y ?? 50,
+            stroke: obj.stroke || "#000",
+            strokeWidth: obj.strokeWidth || 2,
+            markerEnd: obj.shape === "arrow" ? "url(#arrowhead)" : void 0
+          }
+        ),
+        obj.shape === "arrow" && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", children: /* @__PURE__ */ jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: obj.stroke || "#000" }) }) })
+      ] }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `qc-object qc-object--shape ${obj.className || ""}`,
+      style: { ...style, ...shapeStyle }
+    }
+  );
+}
+function ComponentObjectRenderer({
+  obj,
+  isActive,
+  slideIndex
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `qc-object qc-object--component ${obj.className || ""}`, style: getObjectStyle(obj), children: obj.render({ isActive, slideIndex }) });
+}
+function GroupObjectRenderer({
+  obj,
+  isActive,
+  slideIndex
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `qc-object qc-object--group ${obj.className || ""}`, style: getObjectStyle(obj), children: obj.children.map((child) => /* @__PURE__ */ jsx(ObjectRenderer, { obj: child, isActive, slideIndex }, child.id)) });
+}
+function ObjectRenderer({
+  obj,
+  isActive,
+  slideIndex
+}) {
+  switch (obj.type) {
+    case "image":
+      return /* @__PURE__ */ jsx(ImageObjectRenderer, { obj, isActive });
+    case "video":
+      return /* @__PURE__ */ jsx(VideoObjectRenderer, { obj, isActive });
+    case "text":
+      return /* @__PURE__ */ jsx(TextObjectRenderer, { obj });
+    case "audio":
+      return /* @__PURE__ */ jsx(AudioObjectRenderer, { obj, isActive });
+    case "shape":
+      return /* @__PURE__ */ jsx(ShapeObjectRenderer, { obj });
+    case "component":
+      return /* @__PURE__ */ jsx(ComponentObjectRenderer, { obj, isActive, slideIndex });
+    case "group":
+      return /* @__PURE__ */ jsx(GroupObjectRenderer, { obj, isActive, slideIndex });
+    default:
+      return null;
+  }
+}
+function LayerRenderer({
+  layer,
+  isActive,
+  slideIndex
+}) {
+  if (!layer.visible) return null;
+  const style = {
+    position: "absolute",
+    inset: 0,
+    opacity: layer.opacity,
+    mixBlendMode: layer.blendMode,
+    pointerEvents: layer.locked ? "none" : "auto"
+  };
+  return /* @__PURE__ */ jsx("div", { className: `qc-layer qc-layer--${layer.id}`, style, children: layer.objects.map((obj) => /* @__PURE__ */ jsx(ObjectRenderer, { obj, isActive, slideIndex }, obj.id)) });
+}
+function SlideRenderer({ slide, isActive, slideIndex }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "qc-slide",
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(BackgroundRenderer, { background: slide.background }),
+        slide.layers.map((layer, index) => /* @__PURE__ */ jsx(
+          LayerRenderer,
+          {
+            layer,
+            isActive,
+            slideIndex
+          },
+          layer.id
+        ))
+      ]
+    }
+  );
+}
+
+// src/components/Carousel.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultNavigation = {
+  arrows: true,
+  dots: true,
+  thumbnails: false,
+  keyboard: true,
+  touch: true,
+  mouseWheel: false
+};
+var Carousel = forwardRef(
+  ({
+    slides,
+    initialIndex = 0,
+    transition = "fade",
+    transitionDuration = 300,
+    navigation = true,
+    autoplay = false,
+    loop = false,
+    aspectRatio = "16/9",
+    allowFullscreen = true,
+    className = "",
+    style,
+    onSlideChange,
+    onFullscreenChange,
+    theme = "dark"
+  }, ref) => {
+    const containerRef = useRef3(null);
+    const [isFullscreen, setIsFullscreen] = useState2(false);
+    const [touchStart, setTouchStart] = useState2(null);
+    const nav = typeof navigation === "boolean" ? navigation ? defaultNavigation : {} : { ...defaultNavigation, ...navigation };
+    const {
+      currentIndex,
+      currentSlide,
+      totalSlides,
+      direction,
+      isPlaying,
+      canGoNext,
+      canGoPrev,
+      next,
+      prev,
+      goTo,
+      play,
+      pause,
+      handleInteraction
+    } = useCarousel({
+      slides,
+      initialIndex,
+      loop,
+      autoplay,
+      onSlideChange
+    });
+    const enterFullscreen = useCallback2(() => {
+      if (containerRef.current?.requestFullscreen) {
+        containerRef.current.requestFullscreen();
+      }
+    }, []);
+    const exitFullscreen = useCallback2(() => {
+      if (document.fullscreenElement) {
+        document.exitFullscreen();
+      }
+    }, []);
+    const toggleFullscreen = useCallback2(() => {
+      if (isFullscreen) {
+        exitFullscreen();
+      } else {
+        enterFullscreen();
+      }
+    }, [isFullscreen, enterFullscreen, exitFullscreen]);
+    useEffect3(() => {
+      const handleFullscreenChange = () => {
+        const fs = document.fullscreenElement === containerRef.current;
+        setIsFullscreen(fs);
+        onFullscreenChange?.(fs);
+      };
+      document.addEventListener("fullscreenchange", handleFullscreenChange);
+      return () => {
+        document.removeEventListener("fullscreenchange", handleFullscreenChange);
+      };
+    }, [onFullscreenChange]);
+    useEffect3(() => {
+      if (!nav.keyboard) return;
+      const handleKeyDown = (e) => {
+        switch (e.key) {
+          case "ArrowRight":
+          case "ArrowDown":
+            e.preventDefault();
+            next();
+            handleInteraction();
+            break;
+          case "ArrowLeft":
+          case "ArrowUp":
+            e.preventDefault();
+            prev();
+            handleInteraction();
+            break;
+          case "Escape":
+            if (isFullscreen) {
+              exitFullscreen();
+            }
+            break;
+          case "f":
+          case "F":
+            if (allowFullscreen) {
+              toggleFullscreen();
+            }
+            break;
+          case " ":
+            e.preventDefault();
+            if (isPlaying) {
+              pause();
+            } else {
+              play();
+            }
+            break;
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [
+      nav.keyboard,
+      next,
+      prev,
+      handleInteraction,
+      isFullscreen,
+      exitFullscreen,
+      allowFullscreen,
+      toggleFullscreen,
+      isPlaying,
+      play,
+      pause
+    ]);
+    const handleTouchStart = (e) => {
+      if (!nav.touch) return;
+      setTouchStart(e.touches[0].clientX);
+    };
+    const handleTouchEnd = (e) => {
+      if (!nav.touch || touchStart === null) return;
+      const touchEnd = e.changedTouches[0].clientX;
+      const diff = touchStart - touchEnd;
+      if (Math.abs(diff) > 50) {
+        if (diff > 0) {
+          next();
+        } else {
+          prev();
+        }
+        handleInteraction();
+      }
+      setTouchStart(null);
+    };
+    useImperativeHandle(ref, () => ({
+      next,
+      prev,
+      goTo,
+      getCurrentIndex: () => currentIndex,
+      getCurrentSlide: () => currentSlide,
+      enterFullscreen,
+      exitFullscreen,
+      toggleFullscreen,
+      play,
+      pause,
+      isPlaying: () => isPlaying
+    }));
+    const getTransitionStyle = () => {
+      const base = {
+        transition: `all ${transitionDuration}ms ease-in-out`
+      };
+      switch (transition) {
+        case "slide":
+          return {
+            ...base,
+            transform: `translateX(-${currentIndex * 100}%)`
+          };
+        case "fade":
+        default:
+          return base;
+      }
+    };
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: containerRef,
+        className: `qc-carousel qc-carousel--${theme} ${isFullscreen ? "qc-carousel--fullscreen" : ""} ${className}`,
+        style: {
+          position: "relative",
+          width: "100%",
+          aspectRatio: isFullscreen ? "auto" : aspectRatio,
+          overflow: "hidden",
+          backgroundColor: theme === "dark" ? "#1a1a1a" : "#ffffff",
+          ...style
+        },
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: "qc-carousel__slides",
+              style: {
+                display: transition === "slide" ? "flex" : "block",
+                width: transition === "slide" ? `${totalSlides * 100}%` : "100%",
+                height: "100%",
+                ...getTransitionStyle()
+              },
+              children: slides.map((slide, index) => /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: `qc-carousel__slide ${index === currentIndex ? "qc-carousel__slide--active" : ""}`,
+                  style: {
+                    width: transition === "slide" ? `${100 / totalSlides}%` : "100%",
+                    height: "100%",
+                    position: transition === "slide" ? "relative" : "absolute",
+                    top: 0,
+                    left: 0,
+                    opacity: transition === "fade" ? index === currentIndex ? 1 : 0 : 1,
+                    transition: `opacity ${transitionDuration}ms ease-in-out`,
+                    pointerEvents: index === currentIndex ? "auto" : "none"
+                  },
+                  children: /* @__PURE__ */ jsx2(SlideRenderer, { slide, isActive: index === currentIndex, slideIndex: index })
+                },
+                slide.id
+              ))
+            }
+          ),
+          nav.arrows && totalSlides > 1 && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: "qc-carousel__arrow qc-carousel__arrow--prev",
+                onClick: () => {
+                  prev();
+                  handleInteraction();
+                },
+                disabled: !canGoPrev,
+                "aria-label": "Previous slide",
+                style: {
+                  position: "absolute",
+                  left: "16px",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  width: "48px",
+                  height: "48px",
+                  borderRadius: "50%",
+                  border: "none",
+                  backgroundColor: "rgba(0,0,0,0.5)",
+                  color: "white",
+                  cursor: canGoPrev ? "pointer" : "not-allowed",
+                  opacity: canGoPrev ? 1 : 0.3,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: "24px",
+                  zIndex: 10
+                },
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: "qc-carousel__arrow qc-carousel__arrow--next",
+                onClick: () => {
+                  next();
+                  handleInteraction();
+                },
+                disabled: !canGoNext,
+                "aria-label": "Next slide",
+                style: {
+                  position: "absolute",
+                  right: "16px",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  width: "48px",
+                  height: "48px",
+                  borderRadius: "50%",
+                  border: "none",
+                  backgroundColor: "rgba(0,0,0,0.5)",
+                  color: "white",
+                  cursor: canGoNext ? "pointer" : "not-allowed",
+                  opacity: canGoNext ? 1 : 0.3,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: "24px",
+                  zIndex: 10
+                },
+                children: "\u203A"
+              }
+            )
+          ] }),
+          nav.dots && totalSlides > 1 && /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: "qc-carousel__dots",
+              style: {
+                position: "absolute",
+                bottom: "16px",
+                left: "50%",
+                transform: "translateX(-50%)",
+                display: "flex",
+                gap: "8px",
+                zIndex: 10
+              },
+              children: slides.map((_, index) => /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  className: `qc-carousel__dot ${index === currentIndex ? "qc-carousel__dot--active" : ""}`,
+                  onClick: () => {
+                    goTo(index);
+                    handleInteraction();
+                  },
+                  "aria-label": `Go to slide ${index + 1}`,
+                  style: {
+                    width: "10px",
+                    height: "10px",
+                    borderRadius: "50%",
+                    border: "none",
+                    backgroundColor: index === currentIndex ? "#E67E22" : "rgba(255,255,255,0.5)",
+                    cursor: "pointer",
+                    transition: "all 0.2s ease"
+                  }
+                },
+                index
+              ))
+            }
+          ),
+          allowFullscreen && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              className: "qc-carousel__fullscreen",
+              onClick: toggleFullscreen,
+              "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+              style: {
+                position: "absolute",
+                top: "16px",
+                right: "16px",
+                width: "40px",
+                height: "40px",
+                borderRadius: "8px",
+                border: "none",
+                backgroundColor: "rgba(0,0,0,0.5)",
+                color: "white",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "18px",
+                zIndex: 10
+              },
+              children: isFullscreen ? "\u22A0" : "\u229E"
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: "qc-carousel__counter",
+              style: {
+                position: "absolute",
+                top: "16px",
+                left: "16px",
+                padding: "4px 12px",
+                borderRadius: "4px",
+                backgroundColor: "rgba(0,0,0,0.5)",
+                color: "white",
+                fontSize: "14px",
+                zIndex: 10
+              },
+              children: [
+                currentIndex + 1,
+                " / ",
+                totalSlides
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+// src/components/Thumbnails.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function getThumbnail(slide) {
+  if (slide.thumbnail) return slide.thumbnail;
+  for (const layer of slide.layers) {
+    for (const obj of layer.objects) {
+      if (obj.type === "image") {
+        return obj.src;
+      }
+      if (obj.type === "video" && obj.poster) {
+        return obj.poster || null;
+      }
+    }
+  }
+  if (slide.background?.type === "image") {
+    return slide.background.value;
+  }
+  return null;
+}
+function getSlideIcon(slide) {
+  for (const layer of slide.layers) {
+    for (const obj of layer.objects) {
+      switch (obj.type) {
+        case "video":
+          return "\u25B6";
+        case "audio":
+          return "\u{1F3B5}";
+        case "text":
+          return "\u{1F4DD}";
+        case "component":
+          return "\u26A1";
+        case "shape":
+          return "\u25FC";
+        case "group":
+          return "\u{1F4C1}";
+      }
+    }
+  }
+  return "\u{1F5BC}";
+}
+function Thumbnails({
+  slides,
+  currentIndex,
+  onSelect,
+  position = "bottom",
+  size = "medium",
+  theme = "dark"
+}) {
+  const isVertical = position === "left" || position === "right";
+  const sizeMap = {
+    small: { width: 48, height: 36 },
+    medium: { width: 80, height: 60 },
+    large: { width: 120, height: 90 }
+  };
+  const { width, height } = sizeMap[size];
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: `qc-thumbnails qc-thumbnails--${position} qc-thumbnails--${theme}`,
+      style: {
+        display: "flex",
+        flexDirection: isVertical ? "column" : "row",
+        gap: "8px",
+        padding: "8px",
+        overflowX: isVertical ? "hidden" : "auto",
+        overflowY: isVertical ? "auto" : "hidden",
+        backgroundColor: theme === "dark" ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.9)"
+      },
+      children: slides.map((slide, index) => {
+        const thumbnailUrl = getThumbnail(slide);
+        const isActive = index === currentIndex;
+        return /* @__PURE__ */ jsx3(
+          "button",
+          {
+            className: `qc-thumbnail ${isActive ? "qc-thumbnail--active" : ""}`,
+            onClick: () => onSelect(index),
+            style: {
+              width: `${width}px`,
+              height: `${height}px`,
+              minWidth: `${width}px`,
+              minHeight: `${height}px`,
+              border: isActive ? "2px solid #E67E22" : "2px solid transparent",
+              borderRadius: "4px",
+              overflow: "hidden",
+              cursor: "pointer",
+              opacity: isActive ? 1 : 0.6,
+              transition: "all 0.2s ease",
+              backgroundColor: theme === "dark" ? "#333" : "#eee",
+              padding: 0
+            },
+            "aria-label": `Go to slide ${index + 1}: ${slide.name || ""}`,
+            children: thumbnailUrl ? /* @__PURE__ */ jsx3(
+              "img",
+              {
+                src: thumbnailUrl,
+                alt: slide.name || `Slide ${index + 1}`,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover"
+                }
+              }
+            ) : /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: theme === "dark" ? "#888" : "#666",
+                  fontSize: "12px"
+                },
+                children: getSlideIcon(slide)
+              }
+            )
+          },
+          slide.id
+        );
+      })
+    }
+  );
+}
+
+// src/types.ts
+function createSimpleSlide(id, objects, options) {
+  return {
+    id,
+    layers: [{
+      id: "default",
+      name: "Default",
+      visible: true,
+      locked: false,
+      opacity: 1,
+      objects
+    }],
+    ...options
+  };
+}
+function createImageSlide(id, src, options) {
+  const objects = [
+    {
+      id: `${id}-image`,
+      type: "image",
+      src,
+      position: { x: 0, y: 0 },
+      size: { width: 100, height: 100, unit: "percent" },
+      objectFit: options?.objectFit || "contain"
+    }
+  ];
+  if (options?.title) {
+    objects.push({
+      id: `${id}-title`,
+      type: "text",
+      content: options.title,
+      position: { x: 50, y: 90 },
+      fontSize: 24,
+      color: "white",
+      textAlign: "center",
+      textShadow: "0 2px 4px rgba(0,0,0,0.5)"
+    });
+  }
+  return createSimpleSlide(id, objects, { background: options?.background });
+}
+
+// src/index.ts
+var createSlide = {
+  /**
+   * Create a simple image slide (single image, full slide)
+   */
+  image: (id, src, options) => {
+    return createImageSlide(id, src, options);
+  },
+  /**
+   * Create a video slide
+   */
+  video: (id, src, options) => {
+    const videoObj = {
+      id: `${id}-video`,
+      type: "video",
+      src,
+      position: { x: 0, y: 0 },
+      size: { width: 100, height: 100, unit: "percent" },
+      autoplay: options?.autoplay ?? false,
+      muted: options?.muted ?? true,
+      loop: options?.loop ?? false,
+      controls: options?.controls ?? true,
+      poster: options?.poster
+    };
+    return createSimpleSlide(id, [videoObj]);
+  },
+  /**
+   * Create a slide with custom objects
+   */
+  custom: (id, objects, options) => {
+    return createSimpleSlide(id, objects, options);
+  },
+  /**
+   * Create a slide with a React component
+   */
+  component: (id, render, options) => {
+    return createSimpleSlide(id, [{
+      id: `${id}-component`,
+      type: "component",
+      render,
+      position: { x: 0, y: 0 },
+      size: { width: 100, height: 100, unit: "percent" }
+    }], options);
+  }
+};
+export {
+  Carousel,
+  SlideRenderer,
+  Thumbnails,
+  createImageSlide,
+  createSimpleSlide,
+  createSlide,
+  useCarousel
+};