@qwanyx/carousel 0.1.2 → 0.1.4

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, ReactNode } from 'react';
+import React$1, { CSSProperties, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -272,6 +272,18 @@ interface CarouselProps {
     onThumbnailReorder?: (fromIndex: number, toIndex: number) => void;
     /** Called when delete button is clicked on a thumbnail */
     onThumbnailDelete?: (index: number) => void;
+    /** Called when an image is edited and saved (enables editing on double-click) */
+    onImageEdit?: (index: number, blob: Blob) => void;
+    /** Default aspect ratio for the image editor */
+    editorAspectRatio?: '4/3' | '16/9' | '1/1' | '3/4' | '9/16' | 'free';
+    /** ImageEditor component from @qwanyx/stack (pass it to enable editing) */
+    ImageEditor?: React.ComponentType<{
+        src: string;
+        onSave: (blob: Blob) => void;
+        onCancel?: () => void;
+        aspectRatio?: '4/3' | '16/9' | '1/1' | '3/4' | '9/16' | 'free';
+        theme?: 'light' | 'dark';
+    }>;
 }
 /**
  * Carousel ref methods
@@ -305,7 +317,7 @@ declare function createImageSlide(id: string, src: string, options?: {
 /**
  * Qwanyx Carousel - Universal slide/presentation engine
  */
-declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselRef>>;
+declare const Carousel: React$1.ForwardRefExoticComponent<CarouselProps & React$1.RefAttributes<CarouselRef>>;
 
 interface SlideRendererProps {
     slide: Slide;
@@ -386,7 +398,7 @@ declare const createSlide: {
     component: (id: string, render: (props: {
         isActive: boolean;
         slideIndex: number;
-    }) => React.ReactNode, options?: Partial<Omit<Slide, "id" | "layers">>) => Slide;
+    }) => React$1.ReactNode, options?: Partial<Omit<Slide, "id" | "layers">>) => Slide;
     /**
      * Create a slide to display a markdown file
      */

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, ReactNode } from 'react';
+import React$1, { CSSProperties, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -272,6 +272,18 @@ interface CarouselProps {
     onThumbnailReorder?: (fromIndex: number, toIndex: number) => void;
     /** Called when delete button is clicked on a thumbnail */
     onThumbnailDelete?: (index: number) => void;
+    /** Called when an image is edited and saved (enables editing on double-click) */
+    onImageEdit?: (index: number, blob: Blob) => void;
+    /** Default aspect ratio for the image editor */
+    editorAspectRatio?: '4/3' | '16/9' | '1/1' | '3/4' | '9/16' | 'free';
+    /** ImageEditor component from @qwanyx/stack (pass it to enable editing) */
+    ImageEditor?: React.ComponentType<{
+        src: string;
+        onSave: (blob: Blob) => void;
+        onCancel?: () => void;
+        aspectRatio?: '4/3' | '16/9' | '1/1' | '3/4' | '9/16' | 'free';
+        theme?: 'light' | 'dark';
+    }>;
 }
 /**
  * Carousel ref methods
@@ -305,7 +317,7 @@ declare function createImageSlide(id: string, src: string, options?: {
 /**
  * Qwanyx Carousel - Universal slide/presentation engine
  */
-declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselRef>>;
+declare const Carousel: React$1.ForwardRefExoticComponent<CarouselProps & React$1.RefAttributes<CarouselRef>>;
 
 interface SlideRendererProps {
     slide: Slide;
@@ -386,7 +398,7 @@ declare const createSlide: {
     component: (id: string, render: (props: {
         isActive: boolean;
         slideIndex: number;
-    }) => React.ReactNode, options?: Partial<Omit<Slide, "id" | "layers">>) => Slide;
+    }) => React$1.ReactNode, options?: Partial<Omit<Slide, "id" | "layers">>) => Slide;
     /**
      * Create a slide to display a markdown file
      */

package/dist/index.js

@@ -788,12 +788,37 @@ var Carousel = (0, import_react4.forwardRef)(
     onCopySlide,
     // Thumbnail callbacks
     onThumbnailReorder,
-    onThumbnailDelete
+    onThumbnailDelete,
+    // Image editing
+    onImageEdit,
+    editorAspectRatio = "4/3",
+    ImageEditor
   }, ref) => {
     const containerRef = (0, import_react4.useRef)(null);
     const [isFullscreen, setIsFullscreen] = (0, import_react4.useState)(false);
     const [touchStart, setTouchStart] = (0, import_react4.useState)(null);
     const [copiedState, setCopiedState] = (0, import_react4.useState)(null);
+    const [editingIndex, setEditingIndex] = (0, import_react4.useState)(null);
+    const canEdit = ImageEditor !== void 0 && onImageEdit !== void 0;
+    const handleSlideDoubleClick = (0, import_react4.useCallback)((index) => {
+      if (!canEdit) return;
+      setEditingIndex(index);
+    }, [canEdit]);
+    const handleImageSave = (0, import_react4.useCallback)((blob) => {
+      if (editingIndex !== null && onImageEdit) {
+        onImageEdit(editingIndex, blob);
+      }
+      setEditingIndex(null);
+    }, [editingIndex, onImageEdit]);
+    const handleEditorCancel = (0, import_react4.useCallback)(() => {
+      setEditingIndex(null);
+    }, []);
+    const getEditingImageUrl = (0, import_react4.useCallback)(() => {
+      if (editingIndex === null) return void 0;
+      const slide = slides[editingIndex];
+      if (!slide) return void 0;
+      return getSlideUrl ? getSlideUrl(slide) : extractSlideUrl(slide);
+    }, [editingIndex, slides, getSlideUrl]);
     const copyToClipboard = (0, import_react4.useCallback)(async (text, type) => {
       try {
         await navigator.clipboard.writeText(text);
@@ -1009,8 +1034,11 @@ var Carousel = (0, import_react4.forwardRef)(
                           left: 0,
                           opacity: transition === "fade" ? index === currentIndex ? 1 : 0 : 1,
                           transition: `opacity ${transitionDuration}ms ease-in-out`,
-                          pointerEvents: index === currentIndex ? "auto" : "none"
+                          pointerEvents: index === currentIndex ? "auto" : "none",
+                          cursor: canEdit ? "pointer" : "default",
+                          zIndex: index === currentIndex ? 1 : 0
                         },
+                        onDoubleClick: () => handleSlideDoubleClick(index),
                         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SlideRenderer, { slide, isActive: index === currentIndex, slideIndex: index })
                       },
                       slide.id
@@ -1249,6 +1277,80 @@ var Carousel = (0, import_react4.forwardRef)(
               onDelete: onThumbnailDelete,
               theme: theme === "auto" ? "light" : theme
             }
+          ),
+          editingIndex !== null && ImageEditor && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: "qc-carousel__editor-overlay",
+              style: {
+                position: "fixed",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 9999,
+                backgroundColor: theme === "dark" ? "#1a1a1a" : "#f5f5f5",
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      padding: "12px 16px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      borderBottom: `1px solid ${theme === "dark" ? "#333" : "#ddd"}`,
+                      backgroundColor: theme === "dark" ? "#242424" : "#fff"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: {
+                        color: theme === "dark" ? "#fff" : "#333",
+                        fontWeight: 500,
+                        fontSize: "16px"
+                      }, children: [
+                        "Edit Image ",
+                        editingIndex + 1,
+                        " / ",
+                        totalSlides
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          onClick: handleEditorCancel,
+                          style: {
+                            background: "none",
+                            border: "none",
+                            color: theme === "dark" ? "#aaa" : "#666",
+                            cursor: "pointer",
+                            fontSize: "24px",
+                            lineHeight: 1,
+                            padding: "4px"
+                          },
+                          children: "\xD7"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: (() => {
+                  const imageUrl = getEditingImageUrl();
+                  if (!imageUrl) return null;
+                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    ImageEditor,
+                    {
+                      src: imageUrl,
+                      onSave: handleImageSave,
+                      onCancel: handleEditorCancel,
+                      aspectRatio: editorAspectRatio,
+                      theme: theme === "auto" ? "dark" : theme
+                    }
+                  );
+                })() })
+              ]
+            }
           )
         ]
       }

package/dist/index.mjs

@@ -753,12 +753,37 @@ var Carousel = forwardRef(
     onCopySlide,
     // Thumbnail callbacks
     onThumbnailReorder,
-    onThumbnailDelete
+    onThumbnailDelete,
+    // Image editing
+    onImageEdit,
+    editorAspectRatio = "4/3",
+    ImageEditor
   }, ref) => {
     const containerRef = useRef3(null);
     const [isFullscreen, setIsFullscreen] = useState3(false);
     const [touchStart, setTouchStart] = useState3(null);
     const [copiedState, setCopiedState] = useState3(null);
+    const [editingIndex, setEditingIndex] = useState3(null);
+    const canEdit = ImageEditor !== void 0 && onImageEdit !== void 0;
+    const handleSlideDoubleClick = useCallback2((index) => {
+      if (!canEdit) return;
+      setEditingIndex(index);
+    }, [canEdit]);
+    const handleImageSave = useCallback2((blob) => {
+      if (editingIndex !== null && onImageEdit) {
+        onImageEdit(editingIndex, blob);
+      }
+      setEditingIndex(null);
+    }, [editingIndex, onImageEdit]);
+    const handleEditorCancel = useCallback2(() => {
+      setEditingIndex(null);
+    }, []);
+    const getEditingImageUrl = useCallback2(() => {
+      if (editingIndex === null) return void 0;
+      const slide = slides[editingIndex];
+      if (!slide) return void 0;
+      return getSlideUrl ? getSlideUrl(slide) : extractSlideUrl(slide);
+    }, [editingIndex, slides, getSlideUrl]);
     const copyToClipboard = useCallback2(async (text, type) => {
       try {
         await navigator.clipboard.writeText(text);
@@ -974,8 +999,11 @@ var Carousel = forwardRef(
                           left: 0,
                           opacity: transition === "fade" ? index === currentIndex ? 1 : 0 : 1,
                           transition: `opacity ${transitionDuration}ms ease-in-out`,
-                          pointerEvents: index === currentIndex ? "auto" : "none"
+                          pointerEvents: index === currentIndex ? "auto" : "none",
+                          cursor: canEdit ? "pointer" : "default",
+                          zIndex: index === currentIndex ? 1 : 0
                         },
+                        onDoubleClick: () => handleSlideDoubleClick(index),
                         children: /* @__PURE__ */ jsx3(SlideRenderer, { slide, isActive: index === currentIndex, slideIndex: index })
                       },
                       slide.id
@@ -1214,6 +1242,80 @@ var Carousel = forwardRef(
               onDelete: onThumbnailDelete,
               theme: theme === "auto" ? "light" : theme
             }
+          ),
+          editingIndex !== null && ImageEditor && /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              className: "qc-carousel__editor-overlay",
+              style: {
+                position: "fixed",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 9999,
+                backgroundColor: theme === "dark" ? "#1a1a1a" : "#f5f5f5",
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsxs3(
+                  "div",
+                  {
+                    style: {
+                      padding: "12px 16px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      borderBottom: `1px solid ${theme === "dark" ? "#333" : "#ddd"}`,
+                      backgroundColor: theme === "dark" ? "#242424" : "#fff"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs3("span", { style: {
+                        color: theme === "dark" ? "#fff" : "#333",
+                        fontWeight: 500,
+                        fontSize: "16px"
+                      }, children: [
+                        "Edit Image ",
+                        editingIndex + 1,
+                        " / ",
+                        totalSlides
+                      ] }),
+                      /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          onClick: handleEditorCancel,
+                          style: {
+                            background: "none",
+                            border: "none",
+                            color: theme === "dark" ? "#aaa" : "#666",
+                            cursor: "pointer",
+                            fontSize: "24px",
+                            lineHeight: 1,
+                            padding: "4px"
+                          },
+                          children: "\xD7"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx3("div", { style: { flex: 1, minHeight: 0 }, children: (() => {
+                  const imageUrl = getEditingImageUrl();
+                  if (!imageUrl) return null;
+                  return /* @__PURE__ */ jsx3(
+                    ImageEditor,
+                    {
+                      src: imageUrl,
+                      onSave: handleImageSave,
+                      onCancel: handleEditorCancel,
+                      aspectRatio: editorAspectRatio,
+                      theme: theme === "auto" ? "dark" : theme
+                    }
+                  );
+                })() })
+              ]
+            }
           )
         ]
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwanyx/carousel",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -27,7 +27,13 @@
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "@qwanyx/stack": ">=0.2.71"
+  },
+  "peerDependenciesMeta": {
+    "@qwanyx/stack": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/react": "^18.2.0",