@qwanyx/carousel 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -3,7 +3,7 @@ import {
   forwardRef,
   useImperativeHandle,
   useRef as useRef3,
-  useState as useState2,
+  useState as useState3,
   useCallback as useCallback2,
   useEffect as useEffect3
 } from "react";
@@ -476,8 +476,252 @@ function SlideRenderer({ slide, isActive, slideIndex }) {
   );
 }
 
+// src/components/Thumbnails.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } 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,
+  onReorder,
+  onDelete,
+  position = "bottom",
+  size = "medium",
+  theme = "light"
+}) {
+  const isVertical = position === "left" || position === "right";
+  const [draggedIndex, setDraggedIndex] = useState2(null);
+  const [dragOverIndex, setDragOverIndex] = useState2(null);
+  const sizeMap = {
+    small: { width: 48, height: 48 },
+    medium: { width: 64, height: 64 },
+    large: { width: 80, height: 80 }
+  };
+  const { width, height } = sizeMap[size];
+  const handleDragStart = (e, index, thumbnailUrl) => {
+    setDraggedIndex(index);
+    e.dataTransfer.effectAllowed = "copyMove";
+    e.dataTransfer.setData("text/plain", index.toString());
+    if (thumbnailUrl) {
+      e.dataTransfer.setData("text/uri-list", thumbnailUrl);
+      e.dataTransfer.setData("application/x-thumbnail-url", thumbnailUrl);
+    }
+    const target = e.target;
+    requestAnimationFrame(() => {
+      target.style.opacity = "0.5";
+    });
+  };
+  const handleDragEnd = (e) => {
+    const target = e.target;
+    target.style.opacity = "1";
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  };
+  const handleDragOver = (e, index) => {
+    if (!onReorder || draggedIndex === null) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (index !== draggedIndex) {
+      setDragOverIndex(index);
+    }
+  };
+  const handleDragLeave = () => {
+    setDragOverIndex(null);
+  };
+  const handleDrop = (e, toIndex) => {
+    e.preventDefault();
+    if (!onReorder || draggedIndex === null || draggedIndex === toIndex) return;
+    onReorder(draggedIndex, toIndex);
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: `qc-thumbnails qc-thumbnails--${position} qc-thumbnails--${theme}`,
+      style: {
+        display: "flex",
+        flexDirection: isVertical ? "column" : "row",
+        flexWrap: "wrap",
+        gap: "8px",
+        marginTop: "8px"
+      },
+      children: slides.map((slide, index) => {
+        const thumbnailUrl = getThumbnail(slide);
+        const isActive = index === currentIndex;
+        const isDragging = draggedIndex === index;
+        const isDragOver = dragOverIndex === index;
+        return /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "qc-thumbnail-wrapper",
+            style: {
+              position: "relative"
+            },
+            onDragOver: (e) => handleDragOver(e, index),
+            onDragLeave: handleDragLeave,
+            onDrop: (e) => handleDrop(e, index),
+            children: [
+              isDragOver && /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: "-4px",
+                    top: 0,
+                    bottom: 0,
+                    width: "3px",
+                    backgroundColor: "#3B82F6",
+                    borderRadius: "2px"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  className: `qc-thumbnail ${isActive ? "qc-thumbnail--active" : ""}`,
+                  draggable: true,
+                  onDragStart: (e) => handleDragStart(e, index, thumbnailUrl),
+                  onDragEnd: handleDragEnd,
+                  onClick: () => onSelect(index),
+                  style: {
+                    position: "relative",
+                    width: `${width}px`,
+                    height: `${height}px`,
+                    minWidth: `${width}px`,
+                    minHeight: `${height}px`,
+                    border: "none",
+                    borderRadius: "5px",
+                    overflow: "visible",
+                    cursor: onReorder ? "grab" : "pointer",
+                    opacity: isDragging ? 0.5 : 1,
+                    transform: isActive ? "scale(1)" : "scale(0.95)",
+                    transition: "all 0.2s ease",
+                    backgroundColor: theme === "dark" ? "#333" : "#f5f5f5",
+                    padding: 0,
+                    boxShadow: isActive ? "0 0 0 2px #3B82F6, 0 2px 8px rgba(0,0,0,0.15)" : "0 1px 3px rgba(0,0,0,0.1)"
+                  },
+                  "aria-label": `Go to slide ${index + 1}: ${slide.name || ""}`,
+                  children: [
+                    /* @__PURE__ */ jsx2("div", { style: { width: "100%", height: "100%", borderRadius: "5px", overflow: "hidden" }, children: thumbnailUrl ? /* @__PURE__ */ jsx2(
+                      "img",
+                      {
+                        src: thumbnailUrl,
+                        alt: slide.name || `Slide ${index + 1}`,
+                        draggable: false,
+                        style: {
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "cover"
+                        }
+                      }
+                    ) : /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        style: {
+                          width: "100%",
+                          height: "100%",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: theme === "dark" ? "#888" : "#666",
+                          fontSize: "20px"
+                        },
+                        children: getSlideIcon(slide)
+                      }
+                    ) }),
+                    onDelete && isActive && /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onDelete(index);
+                        },
+                        style: {
+                          position: "absolute",
+                          top: "-6px",
+                          right: "-6px",
+                          width: "20px",
+                          height: "20px",
+                          borderRadius: "50%",
+                          backgroundColor: "#EF4444",
+                          color: "white",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          fontSize: "14px",
+                          fontWeight: "bold",
+                          cursor: "pointer",
+                          boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+                          transition: "transform 0.15s ease"
+                        },
+                        onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.1)",
+                        onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
+                        title: "Delete",
+                        children: "\xD7"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          },
+          slide.id
+        );
+      })
+    }
+  );
+}
+
 // src/components/Carousel.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function extractSlideUrl(slide) {
+  const layer = slide.layers?.[0];
+  if (!layer) return void 0;
+  const imageObj = layer.objects?.find((obj) => obj.type === "image");
+  if (imageObj && "src" in imageObj) {
+    return imageObj.src;
+  }
+  return void 0;
+}
 var defaultNavigation = {
   arrows: true,
   dots: true,
@@ -501,11 +745,41 @@ var Carousel = forwardRef(
     style,
     onSlideChange,
     onFullscreenChange,
-    theme = "dark"
+    theme = "dark",
+    // Copy functionality
+    carouselInfo,
+    getSlideUrl,
+    onCopyCarousel,
+    onCopySlide,
+    // Thumbnail callbacks
+    onThumbnailReorder,
+    onThumbnailDelete
   }, ref) => {
     const containerRef = useRef3(null);
-    const [isFullscreen, setIsFullscreen] = useState2(false);
-    const [touchStart, setTouchStart] = useState2(null);
+    const [isFullscreen, setIsFullscreen] = useState3(false);
+    const [touchStart, setTouchStart] = useState3(null);
+    const [copiedState, setCopiedState] = useState3(null);
+    const copyToClipboard = useCallback2(async (text, type) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopiedState(type);
+        setTimeout(() => setCopiedState(null), 2e3);
+      } catch (err) {
+        console.error("Failed to copy:", err);
+      }
+    }, []);
+    const handleCopyCarousel = useCallback2(() => {
+      if (!carouselInfo) return;
+      const jsonStr = JSON.stringify(carouselInfo);
+      copyToClipboard(jsonStr, "carousel");
+      onCopyCarousel?.(carouselInfo);
+    }, [carouselInfo, copyToClipboard, onCopyCarousel]);
+    const handleCopySlide = useCallback2((slide) => {
+      const url = getSlideUrl ? getSlideUrl(slide) : extractSlideUrl(slide);
+      if (!url) return;
+      copyToClipboard(url, "slide");
+      onCopySlide?.(slide, url);
+    }, [getSlideUrl, copyToClipboard, onCopySlide]);
     const nav = typeof navigation === "boolean" ? navigation ? defaultNavigation : {} : { ...defaultNavigation, ...navigation };
     const {
       currentIndex,
@@ -654,200 +928,291 @@ var Carousel = forwardRef(
           return base;
       }
     };
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs3(
       "div",
       {
-        ref: containerRef,
-        className: `qc-carousel qc-carousel--${theme} ${isFullscreen ? "qc-carousel--fullscreen" : ""} ${className}`,
+        className: "qc-carousel-wrapper",
         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(
+          /* @__PURE__ */ jsxs3(
             "div",
             {
-              className: "qc-carousel__dots",
+              ref: containerRef,
+              className: `qc-carousel qc-carousel--${theme} ${isFullscreen ? "qc-carousel--fullscreen" : ""} ${className}`,
               style: {
-                position: "absolute",
-                bottom: "16px",
-                left: "50%",
-                transform: "translateX(-50%)",
-                display: "flex",
-                gap: "8px",
-                zIndex: 10
+                position: "relative",
+                width: "100%",
+                aspectRatio: isFullscreen ? "auto" : aspectRatio,
+                overflow: "hidden",
+                backgroundColor: theme === "dark" ? "#1a1a1a" : "#ffffff"
               },
-              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"
+              onTouchStart: handleTouchStart,
+              onTouchEnd: handleTouchEnd,
+              children: [
+                /* @__PURE__ */ jsx3(
+                  "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__ */ jsx3(
+                      "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__ */ jsx3(SlideRenderer, { slide, isActive: index === currentIndex, slideIndex: index })
+                      },
+                      slide.id
+                    ))
                   }
-                },
-                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"
+                ),
+                nav.arrows && totalSlides > 1 && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                  /* @__PURE__ */ jsx3(
+                    "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__ */ jsx3(
+                    "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__ */ jsx3(
+                  "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__ */ jsx3(
+                      "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
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsxs3(
+                  "div",
+                  {
+                    className: "qc-carousel__top-right-buttons",
+                    style: {
+                      position: "absolute",
+                      top: "16px",
+                      right: "16px",
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      gap: "8px",
+                      zIndex: 10
+                    },
+                    children: [
+                      allowFullscreen && /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          className: "qc-carousel__fullscreen",
+                          onClick: toggleFullscreen,
+                          "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                          style: {
+                            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"
+                          },
+                          children: isFullscreen ? "\u22A0" : "\u229E"
+                        }
+                      ),
+                      currentSlide && (getSlideUrl || extractSlideUrl(currentSlide)) && /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          className: "qc-carousel__copy-slide",
+                          onClick: () => handleCopySlide(currentSlide),
+                          "aria-label": "Copy image URL",
+                          title: "Copy image URL",
+                          style: {
+                            width: "40px",
+                            height: "40px",
+                            borderRadius: "8px",
+                            border: "none",
+                            backgroundColor: copiedState === "slide" ? "rgba(34,197,94,0.8)" : "rgba(0,0,0,0.5)",
+                            color: "white",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: "16px",
+                            transition: "background-color 0.2s ease"
+                          },
+                          children: copiedState === "slide" ? "\u2713" : "\u{1F517}"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                carouselInfo && /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    className: "qc-carousel__copy-carousel",
+                    onClick: handleCopyCarousel,
+                    "aria-label": "Copy carousel link",
+                    title: "Copy carousel link",
+                    style: {
+                      position: "absolute",
+                      top: "16px",
+                      right: allowFullscreen ? "72px" : "16px",
+                      width: "40px",
+                      height: "40px",
+                      borderRadius: "8px",
+                      border: "none",
+                      backgroundColor: copiedState === "carousel" ? "rgba(34,197,94,0.8)" : "rgba(0,0,0,0.5)",
+                      color: "white",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: "16px",
+                      transition: "background-color 0.2s ease",
+                      zIndex: 10
+                    },
+                    children: copiedState === "carousel" ? "\u2713" : "\u{1F4CB}"
+                  }
+                ),
+                /* @__PURE__ */ jsxs3(
+                  "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
+                    ]
+                  }
+                )
+              ]
             }
           ),
-          /* @__PURE__ */ jsxs2(
-            "div",
+          nav.thumbnails && /* @__PURE__ */ jsx3(
+            Thumbnails,
             {
-              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
+              slides,
+              currentIndex,
+              onSelect: (index) => {
+                goTo(index);
+                handleInteraction();
               },
-              children: [
-                currentIndex + 1,
-                " / ",
-                totalSlides
-              ]
+              onReorder: onThumbnailReorder,
+              onDelete: onThumbnailDelete,
+              theme: theme === "auto" ? "light" : theme
             }
           )
         ]
@@ -857,131 +1222,6 @@ var Carousel = forwardRef(
 );
 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 {
@@ -1024,6 +1264,81 @@ function createImageSlide(id, src, options) {
 }
 
 // src/index.ts
+import React4, { useState as useState4, useEffect as useEffect4 } from "react";
+function MarkdownContent({ url, filename }) {
+  const [content, setContent] = useState4("");
+  const [loading, setLoading] = useState4(true);
+  const [error, setError] = useState4(null);
+  useEffect4(() => {
+    fetch(url).then((res) => {
+      if (!res.ok) throw new Error("Failed to load");
+      return res.text();
+    }).then((text) => {
+      setContent(text);
+      setLoading(false);
+    }).catch((err) => {
+      setError(err.message);
+      setLoading(false);
+    });
+  }, [url]);
+  const containerStyle = {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: "#f0f9ff",
+    padding: "16px",
+    overflow: "auto"
+  };
+  const centeredStyle = {
+    ...containerStyle,
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    marginBottom: "12px",
+    paddingBottom: "8px",
+    borderBottom: "1px solid #bae6fd"
+  };
+  const preStyle = {
+    flex: 1,
+    fontSize: "14px",
+    color: "#374151",
+    whiteSpace: "pre-wrap",
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+    overflow: "auto",
+    margin: 0
+  };
+  if (loading) {
+    return React4.createElement(
+      "div",
+      { style: centeredStyle },
+      React4.createElement("span", { style: { color: "#9ca3af" } }, "Loading...")
+    );
+  }
+  if (error) {
+    return React4.createElement(
+      "div",
+      { style: centeredStyle },
+      React4.createElement("span", { style: { color: "#ef4444" } }, "Failed to load markdown")
+    );
+  }
+  const children = [];
+  if (filename) {
+    children.push(
+      React4.createElement(
+        "div",
+        { key: "header", style: headerStyle },
+        React4.createElement("span", { style: { color: "#0284c7", fontWeight: 500, fontSize: "14px" } }, "\u{1F4C4} " + filename)
+      )
+    );
+  }
+  children.push(React4.createElement("pre", { key: "content", style: preStyle }, content));
+  return React4.createElement("div", { style: containerStyle }, ...children);
+}
 var createSlide = {
   /**
    * Create a simple image slide (single image, full slide)
@@ -1066,8 +1381,77 @@ var createSlide = {
       position: { x: 0, y: 0 },
       size: { width: 100, height: 100, unit: "percent" }
     }], options);
+  },
+  /**
+   * Create a slide to display a markdown file
+   */
+  markdown: (id, url, options) => {
+    const thumbnail = options?.thumbnail ?? markdownThumbnailSvg;
+    return createSimpleSlide(id, [{
+      id: `${id}-markdown`,
+      type: "component",
+      render: () => React4.createElement(MarkdownContent, { url, filename: options?.filename }),
+      position: { x: 0, y: 0 },
+      size: { width: 100, height: 100, unit: "percent" }
+    }], { thumbnail });
+  },
+  /**
+   * Create a slide to display an audio file
+   */
+  audio: (id, url, options) => {
+    const thumbnail = options?.thumbnail ?? audioThumbnailSvg;
+    return createSimpleSlide(id, [{
+      id: `${id}-audio`,
+      type: "component",
+      render: () => React4.createElement(AudioContent, { url, filename: options?.filename }),
+      position: { x: 0, y: 0 },
+      size: { width: 100, height: 100, unit: "percent" }
+    }], { thumbnail });
   }
 };
+var markdownThumbnailSvg = "data:image/svg+xml," + encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect fill="#e0f2fe" width="64" height="64"/><path fill="#0284c7" d="M12 20v24h40V20H12zm4 20V24h4l4 6 4-6h4v16h-4v-9l-4 6-4-6v9h-4zm24-8v8h-4l6 8 6-8h-4v-8h-4z"/></svg>'
+);
+var audioThumbnailSvg = "data:image/svg+xml," + encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect fill="#171717" width="64" height="64"/><path fill="#34d399" d="M20 24v16h4V24zm8-4v24h4V20zm8 8v8h4v-8zm8-4v16h4V24z"/></svg>'
+);
+function AudioContent({ url, filename }) {
+  const containerStyle = {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#171717",
+    padding: "16px"
+  };
+  const iconStyle = {
+    width: "48px",
+    height: "48px",
+    color: "#34d399",
+    marginBottom: "12px"
+  };
+  const filenameStyle = {
+    color: "#d1d5db",
+    fontSize: "14px",
+    marginBottom: "16px"
+  };
+  const children = [
+    React4.createElement(
+      "svg",
+      { key: "icon", style: iconStyle, viewBox: "0 0 24 24", fill: "currentColor" },
+      React4.createElement("path", { d: "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" })
+    )
+  ];
+  if (filename) {
+    children.push(React4.createElement("span", { key: "filename", style: filenameStyle }, filename));
+  }
+  children.push(
+    React4.createElement("audio", { key: "audio", src: url, controls: true, style: { width: "100%", maxWidth: "280px" } })
+  );
+  return React4.createElement("div", { style: containerStyle }, ...children);
+}
 export {
   Carousel,
   SlideRenderer,