@caprionlinesrl/puck-plugin-media 0.1.4

package/dist/index.mjs

@@ -0,0 +1,2990 @@
+"use client";
+
+// src/createMediaPlugin.tsx
+import { Image as Image2 } from "lucide-react";
+
+// src/components/ImageField/ImageField.tsx
+import { useState as useState4 } from "react";
+import { createPortal } from "react-dom";
+import { FieldLabel } from "@puckeditor/core";
+import { ImagePlus, X as X4 } from "lucide-react";
+
+// src/components/ImagePickerModal/ImagePickerModal.tsx
+import { useState as useState3, useEffect as useEffect4, useCallback as useCallback3 } from "react";
+import { ArrowLeft, Loader2 as Loader25 } from "lucide-react";
+
+// src/components/Modal/Modal.tsx
+import { useEffect } from "react";
+import { X, Loader2 } from "lucide-react";
+
+// src/components/Modal/Modal.module.css
+var Modal_default = {
+  backdrop: "Modal_backdrop",
+  fadeIn: "Modal_fadeIn",
+  modal: "Modal_modal",
+  slideUp: "Modal_slideUp",
+  small: "Modal_small",
+  header: "Modal_header",
+  title: "Modal_title",
+  headerActions: "Modal_headerActions",
+  closeButton: "Modal_closeButton",
+  toolbar: "Modal_toolbar",
+  content: "Modal_content",
+  loading: "Modal_loading",
+  spinner: "Modal_spinner",
+  spin: "Modal_spin",
+  empty: "Modal_empty",
+  footer: "Modal_footer"
+};
+
+// src/components/Modal/Modal.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Modal({
+  title,
+  onClose,
+  size = "default",
+  headerLeft,
+  headerActions,
+  toolbar,
+  children,
+  footer,
+  overlay,
+  loading = false,
+  empty = false,
+  emptyMessage = "No items found"
+}) {
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [onClose]);
+  useEffect(() => {
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, []);
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: Modal_default.backdrop, onClick: handleBackdropClick, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${Modal_default.modal} ${size === "small" ? Modal_default.small : ""}`,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "modal-title",
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: Modal_default.header, children: [
+          headerLeft,
+          /* @__PURE__ */ jsx("h2", { id: "modal-title", className: Modal_default.title, children: title }),
+          /* @__PURE__ */ jsxs("div", { className: Modal_default.headerActions, children: [
+            headerActions,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onClose();
+                },
+                className: Modal_default.closeButton,
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx(X, { size: 20 })
+              }
+            )
+          ] })
+        ] }),
+        toolbar && /* @__PURE__ */ jsx("div", { className: Modal_default.toolbar, children: toolbar }),
+        /* @__PURE__ */ jsx("div", { className: Modal_default.content, children: loading ? /* @__PURE__ */ jsxs("div", { className: Modal_default.loading, children: [
+          /* @__PURE__ */ jsx(Loader2, { size: 32, className: Modal_default.spinner }),
+          /* @__PURE__ */ jsx("span", { children: "Loading..." })
+        ] }) : empty ? /* @__PURE__ */ jsx("div", { className: Modal_default.empty, children: emptyMessage }) : children }),
+        footer && /* @__PURE__ */ jsx("div", { className: Modal_default.footer, children: footer }),
+        overlay
+      ]
+    }
+  ) });
+}
+
+// src/components/SearchBar/SearchBar.tsx
+import { useRef, useEffect as useEffect2 } from "react";
+import { Search, X as X2 } from "lucide-react";
+
+// src/components/SearchBar/SearchBar.module.css
+var SearchBar_default = {
+  container: "SearchBar_container",
+  icon: "SearchBar_icon",
+  input: "SearchBar_input",
+  clearButton: "SearchBar_clearButton"
+};
+
+// src/components/SearchBar/SearchBar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SearchBar({
+  value,
+  onChange,
+  placeholder = "Search...",
+  autoFocus = false
+}) {
+  const inputRef = useRef(null);
+  useEffect2(() => {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [autoFocus]);
+  const handleClear = () => {
+    onChange("");
+    inputRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: SearchBar_default.container, children: [
+    /* @__PURE__ */ jsx2(Search, { size: 18, className: SearchBar_default.icon }),
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        ref: inputRef,
+        type: "search",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        className: SearchBar_default.input
+      }
+    ),
+    value && /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: handleClear,
+        className: SearchBar_default.clearButton,
+        "aria-label": "Clear search",
+        children: /* @__PURE__ */ jsx2(X2, { size: 16 })
+      }
+    )
+  ] });
+}
+
+// src/components/LoadMoreButton/LoadMoreButton.tsx
+import { Loader2 as Loader22 } from "lucide-react";
+
+// src/components/LoadMoreButton/LoadMoreButton.module.css
+var LoadMoreButton_default = {
+  container: "LoadMoreButton_container",
+  button: "LoadMoreButton_button",
+  spinner: "LoadMoreButton_spinner",
+  spin: "LoadMoreButton_spin"
+};
+
+// src/components/LoadMoreButton/LoadMoreButton.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function LoadMoreButton({ onClick, loading = false }) {
+  return /* @__PURE__ */ jsx3("div", { className: LoadMoreButton_default.container, children: /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled: loading,
+      className: LoadMoreButton_default.button,
+      children: loading ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx3(Loader22, { size: 16, className: LoadMoreButton_default.spinner }),
+        "Loading..."
+      ] }) : "Load more"
+    }
+  ) });
+}
+
+// src/components/ConfirmDialog/ConfirmDialog.tsx
+import { useEffect as useEffect3 } from "react";
+import { Loader2 as Loader23 } from "lucide-react";
+
+// src/components/ConfirmDialog/ConfirmDialog.module.css
+var ConfirmDialog_default = {
+  overlay: "ConfirmDialog_overlay",
+  fadeIn: "ConfirmDialog_fadeIn",
+  dialog: "ConfirmDialog_dialog",
+  slideUp: "ConfirmDialog_slideUp",
+  title: "ConfirmDialog_title",
+  message: "ConfirmDialog_message",
+  actions: "ConfirmDialog_actions",
+  cancelButton: "ConfirmDialog_cancelButton",
+  confirmButton: "ConfirmDialog_confirmButton",
+  danger: "ConfirmDialog_danger",
+  spinner: "ConfirmDialog_spinner",
+  spin: "ConfirmDialog_spin"
+};
+
+// src/components/ConfirmDialog/ConfirmDialog.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ConfirmDialog({
+  title,
+  message,
+  confirmLabel,
+  onConfirm,
+  onCancel,
+  loading = false,
+  variant = "danger"
+}) {
+  useEffect3(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && !loading) {
+        e.stopPropagation();
+        onCancel();
+      }
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [onCancel, loading]);
+  return /* @__PURE__ */ jsx4("div", { className: ConfirmDialog_default.overlay, children: /* @__PURE__ */ jsxs4("div", { className: ConfirmDialog_default.dialog, children: [
+    /* @__PURE__ */ jsx4("h3", { className: ConfirmDialog_default.title, children: title }),
+    /* @__PURE__ */ jsx4("p", { className: ConfirmDialog_default.message, children: message }),
+    /* @__PURE__ */ jsxs4("div", { className: ConfirmDialog_default.actions, children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          className: ConfirmDialog_default.cancelButton,
+          disabled: loading,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          onClick: onConfirm,
+          className: `${ConfirmDialog_default.confirmButton} ${variant === "danger" ? ConfirmDialog_default.danger : ""}`,
+          disabled: loading,
+          children: loading ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+            /* @__PURE__ */ jsx4(Loader23, { size: 16, className: ConfirmDialog_default.spinner }),
+            confirmLabel
+          ] }) : confirmLabel
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/components/SelectionToolbar/SelectionToolbar.tsx
+import { Check } from "lucide-react";
+
+// src/components/SelectionToolbar/SelectionToolbar.module.css
+var SelectionToolbar_default = {
+  toolbar: "SelectionToolbar_toolbar",
+  selectAllButton: "SelectionToolbar_selectAllButton",
+  checkbox: "SelectionToolbar_checkbox",
+  checked: "SelectionToolbar_checked",
+  indeterminate: "SelectionToolbar_indeterminate",
+  indeterminateLine: "SelectionToolbar_indeterminateLine",
+  actions: "SelectionToolbar_actions",
+  cancelButton: "SelectionToolbar_cancelButton",
+  deleteButton: "SelectionToolbar_deleteButton"
+};
+
+// src/components/SelectionToolbar/SelectionToolbar.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function SelectionToolbar({
+  selectedCount,
+  totalCount: _totalCount,
+  onSelectAll,
+  onCancel,
+  onDelete,
+  isAllSelected,
+  isIndeterminate,
+  deleteLabel = "Delete"
+}) {
+  void _totalCount;
+  return /* @__PURE__ */ jsxs5("div", { className: SelectionToolbar_default.toolbar, children: [
+    /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        onClick: onSelectAll,
+        className: `${SelectionToolbar_default.selectAllButton} ${isAllSelected ? SelectionToolbar_default.checked : ""} ${isIndeterminate ? SelectionToolbar_default.indeterminate : ""}`,
+        "aria-label": isAllSelected ? "Deselect all" : "Select all",
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: SelectionToolbar_default.checkbox, children: [
+            isAllSelected && /* @__PURE__ */ jsx5(Check, { size: 14, strokeWidth: 3 }),
+            isIndeterminate && !isAllSelected && /* @__PURE__ */ jsx5("div", { className: SelectionToolbar_default.indeterminateLine })
+          ] }),
+          /* @__PURE__ */ jsx5("span", { children: "Select All" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs5("div", { className: SelectionToolbar_default.actions, children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          className: SelectionToolbar_default.cancelButton,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          onClick: onDelete,
+          className: SelectionToolbar_default.deleteButton,
+          disabled: selectedCount === 0,
+          children: [
+            deleteLabel,
+            " (",
+            selectedCount,
+            ")"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/ImageGrid/ImageGrid.tsx
+import { Pencil, Check as Check2 } from "lucide-react";
+
+// src/components/ImageGrid/ImageGrid.module.css
+var ImageGrid_default = {
+  grid: "ImageGrid_grid",
+  itemContainer: "ImageGrid_itemContainer",
+  item: "ImageGrid_item",
+  selected: "ImageGrid_selected",
+  imageWrapper: "ImageGrid_imageWrapper",
+  image: "ImageGrid_image",
+  checkmark: "ImageGrid_checkmark",
+  checkbox: "ImageGrid_checkbox",
+  checkboxChecked: "ImageGrid_checkboxChecked",
+  info: "ImageGrid_info",
+  infoRow: "ImageGrid_infoRow",
+  infoText: "ImageGrid_infoText",
+  filename: "ImageGrid_filename",
+  meta: "ImageGrid_meta",
+  editButton: "ImageGrid_editButton"
+};
+
+// src/components/ImageGrid/ImageGrid.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function ImageGrid({
+  items,
+  onSelect,
+  selectedId,
+  onEditAlt,
+  manageMode = false,
+  selectedIds,
+  onToggleSelect
+}) {
+  const formatFileSize2 = (bytes) => {
+    if (!bytes) return "";
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+  const handleItemClick = (item) => {
+    if (manageMode && onToggleSelect) {
+      onToggleSelect(item);
+    } else {
+      onSelect(item);
+    }
+  };
+  const handleEditClick = (e, item) => {
+    e.stopPropagation();
+    onEditAlt?.(item);
+  };
+  const isSelected = (item) => {
+    if (manageMode) {
+      return selectedIds?.has(item.id) ?? false;
+    }
+    return selectedId === item.id;
+  };
+  return /* @__PURE__ */ jsx6("div", { className: ImageGrid_default.grid, children: items.map((item) => {
+    const selected = isSelected(item);
+    const isSelectedForInsert = !manageMode && selectedId === item.id;
+    return /* @__PURE__ */ jsxs6("div", { className: ImageGrid_default.itemContainer, children: [
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleItemClick(item),
+          className: `${ImageGrid_default.item} ${isSelectedForInsert ? ImageGrid_default.selected : ""}`,
+          title: item.filename,
+          children: /* @__PURE__ */ jsxs6("div", { className: ImageGrid_default.imageWrapper, children: [
+            /* @__PURE__ */ jsx6(
+              "img",
+              {
+                src: item.thumbnailUrl || item.url,
+                alt: item.filename || "",
+                className: ImageGrid_default.image,
+                loading: "lazy"
+              }
+            ),
+            manageMode && /* @__PURE__ */ jsx6("div", { className: `${ImageGrid_default.checkbox} ${selected ? ImageGrid_default.checkboxChecked : ""}`, children: selected && /* @__PURE__ */ jsx6(Check2, { size: 14, strokeWidth: 3 }) }),
+            isSelectedForInsert && /* @__PURE__ */ jsx6("div", { className: ImageGrid_default.checkmark, children: /* @__PURE__ */ jsx6(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ jsx6(
+                  "path",
+                  {
+                    d: "M13.5 4.5L6 12L2.5 8.5",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            ) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx6("div", { className: ImageGrid_default.info, children: /* @__PURE__ */ jsxs6("div", { className: ImageGrid_default.infoRow, children: [
+        /* @__PURE__ */ jsxs6("div", { className: ImageGrid_default.infoText, children: [
+          item.filename && /* @__PURE__ */ jsx6("span", { className: ImageGrid_default.filename, children: item.filename }),
+          /* @__PURE__ */ jsxs6("span", { className: ImageGrid_default.meta, children: [
+            item.width && item.height && /* @__PURE__ */ jsxs6("span", { children: [
+              item.width,
+              "\xD7",
+              item.height
+            ] }),
+            item.size && /* @__PURE__ */ jsx6("span", { children: formatFileSize2(item.size) })
+          ] })
+        ] }),
+        !manageMode && onEditAlt && /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => handleEditClick(e, item),
+            className: ImageGrid_default.editButton,
+            "aria-label": "Edit alt",
+            children: /* @__PURE__ */ jsx6(Pencil, { size: 14 })
+          }
+        )
+      ] }) })
+    ] }, item.id);
+  }) });
+}
+
+// src/components/UploadDropzone/UploadDropzone.tsx
+import { useState as useState2, useRef as useRef3, useCallback as useCallback2 } from "react";
+import { Upload } from "lucide-react";
+
+// src/hooks/useUpload.ts
+import { useState, useCallback, useRef as useRef2 } from "react";
+var DEFAULT_CONFIG = {
+  accept: "image/*",
+  maxSize: 10 * 1024 * 1024,
+  // 10MB
+  multiple: true
+};
+var MAX_CONCURRENT_UPLOADS = 3;
+var generateId = () => `upload-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+var formatFileSize = (bytes) => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+var validateFile = (file, config) => {
+  if (file.size > config.maxSize) {
+    return {
+      valid: false,
+      error: `File too large. Maximum size is ${formatFileSize(config.maxSize)}`
+    };
+  }
+  const acceptedTypes = config.accept.split(",").map((t) => t.trim());
+  const isAccepted = acceptedTypes.some((type) => {
+    if (type === "*/*" || type === "*") return true;
+    if (type.endsWith("/*")) {
+      const category = type.slice(0, -2);
+      return file.type.startsWith(category);
+    }
+    if (type.startsWith(".")) {
+      return file.name.toLowerCase().endsWith(type.toLowerCase());
+    }
+    return file.type === type;
+  });
+  if (!isAccepted) {
+    return {
+      valid: false,
+      error: `File type not accepted. Accepted types: ${config.accept}`
+    };
+  }
+  return { valid: true };
+};
+var createPreviewUrl = (file) => {
+  if (file.type.startsWith("image/")) {
+    return URL.createObjectURL(file);
+  }
+  return void 0;
+};
+function useUpload({
+  upload,
+  config,
+  onUploadComplete
+}) {
+  const [uploading, setUploading] = useState([]);
+  const activeUploadsRef = useRef2(/* @__PURE__ */ new Set());
+  const uploadConfig = { ...DEFAULT_CONFIG, ...config };
+  const startUpload = useCallback(
+    async (id, file) => {
+      try {
+        const result = await upload(file, {
+          onProgress: (percent) => {
+            setUploading(
+              (current) => current.map((f) => f.id === id ? { ...f, progress: percent } : f)
+            );
+          }
+        });
+        const singleResult = Array.isArray(result) ? result[0] : result;
+        setUploading(
+          (current) => current.map(
+            (f) => f.id === id ? { ...f, status: "completed", progress: 100, result: singleResult } : f
+          )
+        );
+        onUploadComplete?.(singleResult);
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "Upload failed";
+        setUploading(
+          (current) => current.map(
+            (f) => f.id === id ? { ...f, status: "error", error: errorMessage } : f
+          )
+        );
+      } finally {
+        activeUploadsRef.current.delete(id);
+        processQueue();
+      }
+    },
+    [upload, onUploadComplete]
+  );
+  const processQueue = useCallback(() => {
+    setUploading((current) => {
+      const pending = current.filter(
+        (f) => f.status === "pending" && !activeUploadsRef.current.has(f.id)
+      );
+      const activeCount = activeUploadsRef.current.size;
+      const slotsAvailable = MAX_CONCURRENT_UPLOADS - activeCount;
+      if (slotsAvailable <= 0 || pending.length === 0) {
+        return current;
+      }
+      const toStart = pending.slice(0, slotsAvailable);
+      toStart.forEach((file) => {
+        activeUploadsRef.current.add(file.id);
+        startUpload(file.id, file.file);
+      });
+      return current.map(
+        (f) => toStart.some((t) => t.id === f.id) ? { ...f, status: "uploading" } : f
+      );
+    });
+  }, [startUpload]);
+  const addFiles = useCallback(
+    (files) => {
+      const fileArray = Array.from(files);
+      const filesToAdd = uploadConfig.multiple ? fileArray : fileArray.slice(0, 1);
+      const newUploads = filesToAdd.map((file) => {
+        const validation = validateFile(file, uploadConfig);
+        const previewUrl = createPreviewUrl(file);
+        return {
+          id: generateId(),
+          file,
+          progress: 0,
+          status: validation.valid ? "pending" : "error",
+          error: validation.error,
+          previewUrl
+        };
+      });
+      setUploading((current) => [...newUploads, ...current]);
+      setTimeout(processQueue, 0);
+    },
+    [uploadConfig, processQueue]
+  );
+  const cancelUpload = useCallback((id) => {
+    setUploading((current) => {
+      const file = current.find((f) => f.id === id);
+      if (file?.previewUrl) {
+        URL.revokeObjectURL(file.previewUrl);
+      }
+      return current.filter((f) => f.id !== id);
+    });
+    activeUploadsRef.current.delete(id);
+  }, []);
+  const clearCompleted = useCallback(() => {
+    setUploading((current) => {
+      current.filter((f) => f.status === "completed" || f.status === "error").forEach((f) => {
+        if (f.previewUrl) {
+          URL.revokeObjectURL(f.previewUrl);
+        }
+      });
+      return current.filter((f) => f.status === "pending" || f.status === "uploading");
+    });
+  }, []);
+  const isUploading = uploading.some(
+    (f) => f.status === "pending" || f.status === "uploading"
+  );
+  return {
+    uploading,
+    isUploading,
+    addFiles,
+    cancelUpload,
+    clearCompleted,
+    uploadConfig
+  };
+}
+
+// src/components/UploadDropzone/UploadDropzone.module.css
+var UploadDropzone_default = {
+  dropzone: "UploadDropzone_dropzone",
+  disabled: "UploadDropzone_disabled",
+  dragging: "UploadDropzone_dragging",
+  input: "UploadDropzone_input",
+  icon: "UploadDropzone_icon",
+  text: "UploadDropzone_text",
+  hint: "UploadDropzone_hint"
+};
+
+// src/components/UploadDropzone/UploadDropzone.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function UploadDropzone({
+  onFilesSelected,
+  config,
+  disabled = false
+}) {
+  const [isDragging, setIsDragging] = useState2(false);
+  const inputRef = useRef3(null);
+  const dragCounterRef = useRef3(0);
+  const handleDragEnter = useCallback2((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setIsDragging(true);
+    }
+  }, []);
+  const handleDragLeave = useCallback2((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDragging(false);
+    }
+  }, []);
+  const handleDragOver = useCallback2((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDrop = useCallback2(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+      if (disabled) return;
+      const { files } = e.dataTransfer;
+      if (files && files.length > 0) {
+        onFilesSelected(files);
+      }
+    },
+    [disabled, onFilesSelected]
+  );
+  const handleClick = useCallback2(() => {
+    if (!disabled && inputRef.current) {
+      inputRef.current.click();
+    }
+  }, [disabled]);
+  const handleInputChange = useCallback2(
+    (e) => {
+      const { files } = e.target;
+      if (files && files.length > 0) {
+        onFilesSelected(files);
+        e.target.value = "";
+      }
+    },
+    [onFilesSelected]
+  );
+  const formatAcceptedTypes = (accept) => {
+    const types = accept.split(",").map((t) => t.trim());
+    const formatted = types.map((type) => {
+      if (type === "image/*") return "Images";
+      if (type === "image/jpeg") return "JPG";
+      if (type === "image/png") return "PNG";
+      if (type === "image/gif") return "GIF";
+      if (type === "image/webp") return "WebP";
+      if (type === "image/svg+xml") return "SVG";
+      return type.replace("image/", "").toUpperCase();
+    });
+    return formatted.join(", ");
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: `${UploadDropzone_default.dropzone} ${isDragging ? UploadDropzone_default.dragging : ""} ${disabled ? UploadDropzone_default.disabled : ""}`,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      onClick: handleClick,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept: config.accept,
+            multiple: config.multiple,
+            onChange: handleInputChange,
+            className: UploadDropzone_default.input,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx7(Upload, { size: 24, className: UploadDropzone_default.icon }),
+        /* @__PURE__ */ jsx7("span", { className: UploadDropzone_default.text, children: isDragging ? "Drop files here" : "Drop files here or click to upload" }),
+        /* @__PURE__ */ jsxs7("span", { className: UploadDropzone_default.hint, children: [
+          formatAcceptedTypes(config.accept),
+          " (max ",
+          formatFileSize(config.maxSize),
+          ")"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/UploadQueue/UploadQueue.tsx
+import { X as X3, CheckCircle, AlertCircle, Loader2 as Loader24 } from "lucide-react";
+
+// src/components/UploadQueue/UploadQueue.module.css
+var UploadQueue_default = {
+  container: "UploadQueue_container",
+  header: "UploadQueue_header",
+  title: "UploadQueue_title",
+  clearButton: "UploadQueue_clearButton",
+  list: "UploadQueue_list",
+  item: "UploadQueue_item",
+  preview: "UploadQueue_preview",
+  previewImage: "UploadQueue_previewImage",
+  previewPlaceholder: "UploadQueue_previewPlaceholder",
+  progressOverlay: "UploadQueue_progressOverlay",
+  progressBar: "UploadQueue_progressBar",
+  progressText: "UploadQueue_progressText",
+  info: "UploadQueue_info",
+  filename: "UploadQueue_filename",
+  size: "UploadQueue_size",
+  error: "UploadQueue_error",
+  actions: "UploadQueue_actions",
+  cancelButton: "UploadQueue_cancelButton",
+  spinner: "UploadQueue_spinner",
+  spin: "UploadQueue_spin",
+  successIcon: "UploadQueue_successIcon",
+  errorIcon: "UploadQueue_errorIcon",
+  completed: "UploadQueue_completed"
+};
+
+// src/components/UploadQueue/UploadQueue.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function UploadQueue({ files, onCancel, onClearCompleted }) {
+  if (files.length === 0) return null;
+  const hasCompleted = files.some((f) => f.status === "completed" || f.status === "error");
+  return /* @__PURE__ */ jsxs8("div", { className: UploadQueue_default.container, children: [
+    /* @__PURE__ */ jsxs8("div", { className: UploadQueue_default.header, children: [
+      /* @__PURE__ */ jsxs8("span", { className: UploadQueue_default.title, children: [
+        "Uploading (",
+        files.filter((f) => f.status === "uploading" || f.status === "pending").length,
+        ")"
+      ] }),
+      hasCompleted && /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          onClick: onClearCompleted,
+          className: UploadQueue_default.clearButton,
+          children: "Clear completed"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: UploadQueue_default.list, children: files.map((file) => /* @__PURE__ */ jsx8(UploadItem, { file, onCancel: () => onCancel(file.id) }, file.id)) })
+  ] });
+}
+function UploadItem({ file, onCancel }) {
+  return /* @__PURE__ */ jsxs8("div", { className: `${UploadQueue_default.item} ${UploadQueue_default[file.status]}`, children: [
+    /* @__PURE__ */ jsxs8("div", { className: UploadQueue_default.preview, children: [
+      file.previewUrl ? /* @__PURE__ */ jsx8("img", { src: file.previewUrl, alt: "", className: UploadQueue_default.previewImage }) : /* @__PURE__ */ jsx8("div", { className: UploadQueue_default.previewPlaceholder }),
+      file.status === "uploading" && /* @__PURE__ */ jsxs8("div", { className: UploadQueue_default.progressOverlay, children: [
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: UploadQueue_default.progressBar,
+            style: { height: `${100 - file.progress}%` }
+          }
+        ),
+        /* @__PURE__ */ jsxs8("span", { className: UploadQueue_default.progressText, children: [
+          file.progress,
+          "%"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: UploadQueue_default.info, children: [
+      /* @__PURE__ */ jsx8("span", { className: UploadQueue_default.filename, title: file.file.name, children: file.file.name }),
+      /* @__PURE__ */ jsx8("span", { className: UploadQueue_default.size, children: formatFileSize(file.file.size) }),
+      file.error && /* @__PURE__ */ jsx8("span", { className: UploadQueue_default.error, children: file.error })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: UploadQueue_default.actions, children: [
+      file.status === "pending" && /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          className: UploadQueue_default.cancelButton,
+          "aria-label": "Cancel upload",
+          children: /* @__PURE__ */ jsx8(X3, { size: 16 })
+        }
+      ),
+      file.status === "uploading" && /* @__PURE__ */ jsx8(Loader24, { size: 18, className: UploadQueue_default.spinner }),
+      file.status === "completed" && /* @__PURE__ */ jsx8(CheckCircle, { size: 18, className: UploadQueue_default.successIcon }),
+      file.status === "error" && /* @__PURE__ */ jsx8(AlertCircle, { size: 18, className: UploadQueue_default.errorIcon })
+    ] })
+  ] });
+}
+
+// src/components/ImagePickerModal/ImagePickerModal.module.css
+var ImagePickerModal_default = {
+  backButton: "ImagePickerModal_backButton",
+  selectModeButton: "ImagePickerModal_selectModeButton",
+  toolbar: "ImagePickerModal_toolbar",
+  uploadSection: "ImagePickerModal_uploadSection",
+  footer: "ImagePickerModal_footer",
+  footerInfo: "ImagePickerModal_footerInfo",
+  footerImage: "ImagePickerModal_footerImage",
+  footerFilename: "ImagePickerModal_footerFilename",
+  footerMeta: "ImagePickerModal_footerMeta",
+  selectButton: "ImagePickerModal_selectButton",
+  editContent: "ImagePickerModal_editContent",
+  editPreview: "ImagePickerModal_editPreview",
+  editImage: "ImagePickerModal_editImage",
+  editInfo: "ImagePickerModal_editInfo",
+  editInfoRow: "ImagePickerModal_editInfoRow",
+  editInfoLabel: "ImagePickerModal_editInfoLabel",
+  editInfoValue: "ImagePickerModal_editInfoValue",
+  editField: "ImagePickerModal_editField",
+  editFieldHeader: "ImagePickerModal_editFieldHeader",
+  editFieldLabel: "ImagePickerModal_editFieldLabel",
+  langTabs: "ImagePickerModal_langTabs",
+  langTab: "ImagePickerModal_langTab",
+  langTabActive: "ImagePickerModal_langTabActive",
+  editInput: "ImagePickerModal_editInput",
+  editFooter: "ImagePickerModal_editFooter",
+  saveButton: "ImagePickerModal_saveButton",
+  spinner: "ImagePickerModal_spinner",
+  spin: "ImagePickerModal_spin"
+};
+
+// src/components/ImagePickerModal/ImagePickerModal.tsx
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var DEFAULT_UPLOAD_CONFIG = {
+  accept: "image/*",
+  maxSize: 10 * 1024 * 1024,
+  multiple: true
+};
+var PAGE_SIZE = 20;
+function ImagePickerModal({
+  languages,
+  imageOptions,
+  title = "Select Image",
+  selectedImage,
+  onSelect,
+  onClose,
+  selectable = true
+}) {
+  const { fetchList, upload, update, delete: deleteImage, uploadConfig } = imageOptions;
+  const [view, setView] = useState3("picker");
+  const [editingItem, setEditingItem] = useState3(null);
+  const [selectMode, setSelectMode] = useState3(false);
+  const [selectedForDelete, setSelectedForDelete] = useState3(/* @__PURE__ */ new Set());
+  const [items, setItems] = useState3([]);
+  const [search, setSearch] = useState3("");
+  const [loading, setLoading] = useState3(true);
+  const [page, setPage] = useState3(1);
+  const [hasMore, setHasMore] = useState3(false);
+  const [selectedItem, setSelectedItem] = useState3(null);
+  const [altValues, setAltValues] = useState3({});
+  const [activeLang, setActiveLang] = useState3(languages[0]?.code || "it");
+  const [isSaving, setIsSaving] = useState3(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState3(false);
+  const [isDeleting, setIsDeleting] = useState3(false);
+  const canUpload = !!upload;
+  const {
+    uploading,
+    isUploading,
+    addFiles,
+    cancelUpload,
+    clearCompleted,
+    uploadConfig: mergedUploadConfig
+  } = useUpload({
+    upload: upload || (async () => {
+      throw new Error("Upload not configured");
+    }),
+    config: uploadConfig || DEFAULT_UPLOAD_CONFIG,
+    onUploadComplete: (newItem) => {
+      setItems((prev) => [newItem, ...prev]);
+    }
+  });
+  const loadItems = useCallback3(
+    async (searchQuery, pageNum, append = false) => {
+      setLoading(true);
+      try {
+        const result = await fetchList({
+          query: searchQuery || void 0,
+          page: pageNum,
+          pageSize: PAGE_SIZE
+        });
+        const newItems = Array.isArray(result) ? result : result.items;
+        const more = Array.isArray(result) ? newItems.length === PAGE_SIZE : result.hasMore ?? false;
+        setItems((prev) => append ? [...prev, ...newItems] : newItems);
+        setHasMore(more);
+      } catch (error) {
+        console.error("Failed to fetch images:", error);
+        setItems([]);
+        setHasMore(false);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [fetchList]
+  );
+  useEffect4(() => {
+    const timer = setTimeout(() => {
+      setPage(1);
+      loadItems(search, 1);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [search, loadItems]);
+  useEffect4(() => {
+    if (selectedImage) {
+      const existingItem = items.find((item) => item.id === selectedImage.id);
+      if (existingItem) {
+        setSelectedItem(existingItem);
+      }
+    }
+  }, [selectedImage, items]);
+  const handleClose = useCallback3(() => {
+    onClose();
+  }, [onClose]);
+  const handleLoadMore = () => {
+    const nextPage = page + 1;
+    setPage(nextPage);
+    loadItems(search, nextPage, true);
+  };
+  const handleImageClick = (item) => {
+    if (selectedItem?.id === item.id) {
+      setSelectedItem(null);
+    } else {
+      setSelectedItem(item);
+    }
+  };
+  const handleConfirmSelection = () => {
+    if (!selectedItem || !onSelect) return;
+    onSelect(selectedItem);
+  };
+  const handleEditAlt = (item) => {
+    setEditingItem(item);
+    setAltValues(item.alt || {});
+    setActiveLang(languages[0]?.code || "it");
+    setView("edit");
+  };
+  const handleAltChange = (langCode, value) => {
+    setAltValues((prev) => ({
+      ...prev,
+      [langCode]: value
+    }));
+  };
+  const handleSaveAlt = async () => {
+    if (!editingItem || !update) return;
+    setIsSaving(true);
+    try {
+      await update(editingItem.id, { alt: altValues });
+      setItems(
+        (prev) => prev.map(
+          (item) => item.id === editingItem.id ? { ...item, alt: altValues } : item
+        )
+      );
+      if (selectedItem?.id === editingItem.id) {
+        setSelectedItem((prev) => prev ? { ...prev, alt: altValues } : null);
+      }
+      setView("picker");
+      setEditingItem(null);
+      setAltValues({});
+    } catch (error) {
+      console.error("Failed to update alt text:", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleToggleSelect = (item) => {
+    setSelectedForDelete((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(item.id)) {
+        newSet.delete(item.id);
+      } else {
+        newSet.add(item.id);
+      }
+      return newSet;
+    });
+  };
+  const handleSelectAll = () => {
+    if (selectedForDelete.size === items.length) {
+      setSelectedForDelete(/* @__PURE__ */ new Set());
+    } else {
+      setSelectedForDelete(new Set(items.map((item) => item.id)));
+    }
+  };
+  const handleConfirmDelete = async () => {
+    if (!deleteImage || selectedForDelete.size === 0) return;
+    setIsDeleting(true);
+    try {
+      const deletePromises = Array.from(selectedForDelete).map((id) => deleteImage(id));
+      await Promise.all(deletePromises);
+      setItems((prev) => prev.filter((item) => !selectedForDelete.has(item.id)));
+      if (selectedItem && selectedForDelete.has(selectedItem.id)) {
+        setSelectedItem(null);
+      }
+      setShowDeleteConfirm(false);
+      setSelectedForDelete(/* @__PURE__ */ new Set());
+      setSelectMode(false);
+    } catch (error) {
+      console.error("Failed to delete images:", error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+  const formatFileSize2 = (bytes) => {
+    if (!bytes) return "";
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+  const isAllSelected = items.length > 0 && selectedForDelete.size === items.length;
+  const isSomeSelected = selectedForDelete.size > 0 && selectedForDelete.size < items.length;
+  if (view === "edit" && editingItem) {
+    return /* @__PURE__ */ jsx9(
+      Modal,
+      {
+        title: "Edit Image Details",
+        onClose: handleClose,
+        headerLeft: /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setView("picker");
+              setEditingItem(null);
+              setAltValues({});
+            },
+            className: ImagePickerModal_default.backButton,
+            "aria-label": "Back to grid",
+            children: /* @__PURE__ */ jsx9(ArrowLeft, { size: 20 })
+          }
+        ),
+        footer: /* @__PURE__ */ jsxs9("div", { className: ImagePickerModal_default.editFooter, children: [
+          /* @__PURE__ */ jsx9("div", {}),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              onClick: handleSaveAlt,
+              className: ImagePickerModal_default.saveButton,
+              disabled: isSaving || !update,
+              children: isSaving ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
+                /* @__PURE__ */ jsx9(Loader25, { size: 16, className: ImagePickerModal_default.spinner }),
+                "Saving..."
+              ] }) : "Save"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxs9("div", { className: ImagePickerModal_default.editContent, children: [
+          /* @__PURE__ */ jsx9("div", { className: ImagePickerModal_default.editPreview, children: /* @__PURE__ */ jsx9(
+            "img",
+            {
+              src: editingItem.url,
+              alt: editingItem.filename || "",
+              className: ImagePickerModal_default.editImage
+            }
+          ) }),
+          /* @__PURE__ */ jsxs9("div", { className: ImagePickerModal_default.editInfo, children: [
+            /* @__PURE__ */ jsxs9("div", { className: ImagePickerModal_default.editInfoRow, children: [
+              /* @__PURE__ */ jsx9("span", { className: ImagePickerModal_default.editInfoLabel, children: "Filename" }),
+              /* @__PURE__ */ jsx9("span", { className: ImagePickerModal_default.editInfoValue, children: editingItem.filename })
+            ] }),
+            editingItem.width && editingItem.height && /* @__PURE__ */ jsxs9("div", { className: ImagePickerModal_default.editInfoRow, children: [
+              /* @__PURE__ */ jsx9("span", { className: ImagePickerModal_default.editInfoLabel, children: "Dimensions" }),
+              /* @__PURE__ */ jsxs9("span", { className: ImagePickerModal_default.editInfoValue, children: [
+                editingItem.width,
+                "\xD7",
+                editingItem.height
+              ] })
+            ] }),
+            editingItem.size && /* @__PURE__ */ jsxs9("div", { className: ImagePickerModal_default.editInfoRow, children: [
+              /* @__PURE__ */ jsx9("span", { className: ImagePickerModal_default.editInfoLabel, children: "Size" }),
+              /* @__PURE__ */ jsx9("span", { className: ImagePickerModal_default.editInfoValue, children: formatFileSize2(editingItem.size) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { className: ImagePickerModal_default.editField, children: [
+            /* @__PURE__ */ jsxs9("div", { className: ImagePickerModal_default.editFieldHeader, children: [
+              /* @__PURE__ */ jsx9("label", { className: ImagePickerModal_default.editFieldLabel, children: "Alt" }),
+              /* @__PURE__ */ jsx9("div", { className: ImagePickerModal_default.langTabs, children: languages.map((lang) => /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setActiveLang(lang.code),
+                  className: `${ImagePickerModal_default.langTab} ${activeLang === lang.code ? ImagePickerModal_default.langTabActive : ""}`,
+                  children: lang.code.toUpperCase()
+                },
+                lang.code
+              )) })
+            ] }),
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                type: "text",
+                value: altValues[activeLang] || "",
+                onChange: (e) => handleAltChange(activeLang, e.target.value),
+                placeholder: `Alt text in ${languages.find((l) => l.code === activeLang)?.label || activeLang}...`,
+                className: ImagePickerModal_default.editInput
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+  const renderFooter = () => {
+    if (selectMode) {
+      return /* @__PURE__ */ jsx9(
+        SelectionToolbar,
+        {
+          selectedCount: selectedForDelete.size,
+          totalCount: items.length,
+          onSelectAll: handleSelectAll,
+          onCancel: () => {
+            setSelectMode(false);
+            setSelectedForDelete(/* @__PURE__ */ new Set());
+          },
+          onDelete: () => setShowDeleteConfirm(true),
+          isAllSelected,
+          isIndeterminate: isSomeSelected
+        }
+      );
+    }
+    if (selectedItem && selectable) {
+      return /* @__PURE__ */ jsxs9("div", { className: ImagePickerModal_default.footer, children: [
+        /* @__PURE__ */ jsxs9("div", { className: ImagePickerModal_default.footerInfo, children: [
+          /* @__PURE__ */ jsx9(
+            "img",
+            {
+              src: selectedItem.thumbnailUrl || selectedItem.url,
+              alt: "",
+              className: ImagePickerModal_default.footerImage
+            }
+          ),
+          /* @__PURE__ */ jsx9("span", { className: ImagePickerModal_default.footerFilename, children: selectedItem.filename }),
+          selectedItem.width && selectedItem.height && /* @__PURE__ */ jsxs9("span", { className: ImagePickerModal_default.footerMeta, children: [
+            selectedItem.width,
+            "\xD7",
+            selectedItem.height
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            onClick: handleConfirmSelection,
+            className: ImagePickerModal_default.selectButton,
+            children: "Select Image"
+          }
+        )
+      ] });
+    }
+    return void 0;
+  };
+  return /* @__PURE__ */ jsxs9(
+    Modal,
+    {
+      title,
+      onClose: handleClose,
+      headerActions: !selectMode && deleteImage ? /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSelectMode(true),
+          className: ImagePickerModal_default.selectModeButton,
+          children: "Select Items"
+        }
+      ) : void 0,
+      toolbar: /* @__PURE__ */ jsx9("div", { className: ImagePickerModal_default.toolbar, children: /* @__PURE__ */ jsx9(
+        SearchBar,
+        {
+          value: search,
+          onChange: setSearch,
+          placeholder: "Search images...",
+          autoFocus: !selectMode
+        }
+      ) }),
+      footer: renderFooter(),
+      overlay: showDeleteConfirm ? /* @__PURE__ */ jsx9(
+        ConfirmDialog,
+        {
+          title: "Delete Images",
+          message: `Are you sure you want to delete ${selectedForDelete.size} image${selectedForDelete.size > 1 ? "s" : ""}? This action cannot be undone.`,
+          confirmLabel: isDeleting ? "Deleting..." : `Delete ${selectedForDelete.size} image${selectedForDelete.size > 1 ? "s" : ""}`,
+          onConfirm: handleConfirmDelete,
+          onCancel: () => setShowDeleteConfirm(false),
+          loading: isDeleting,
+          variant: "danger"
+        }
+      ) : void 0,
+      loading: loading && items.length === 0,
+      empty: !loading && items.length === 0,
+      emptyMessage: "No images found",
+      children: [
+        canUpload && !selectMode && /* @__PURE__ */ jsxs9("div", { className: ImagePickerModal_default.uploadSection, children: [
+          /* @__PURE__ */ jsx9(
+            UploadDropzone,
+            {
+              onFilesSelected: addFiles,
+              config: mergedUploadConfig,
+              disabled: isUploading && uploading.length >= 10
+            }
+          ),
+          uploading.length > 0 && /* @__PURE__ */ jsx9(
+            UploadQueue,
+            {
+              files: uploading,
+              onCancel: cancelUpload,
+              onClearCompleted: clearCompleted
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx9(
+          ImageGrid,
+          {
+            items,
+            onSelect: handleImageClick,
+            selectedId: selectedItem?.id,
+            onEditAlt: update ? handleEditAlt : void 0,
+            manageMode: selectMode,
+            selectedIds: selectedForDelete,
+            onToggleSelect: handleToggleSelect
+          }
+        ),
+        hasMore && /* @__PURE__ */ jsx9(LoadMoreButton, { onClick: handleLoadMore, loading })
+      ]
+    }
+  );
+}
+
+// src/components/ImageField/ImageField.module.css
+var ImageField_default = {
+  container: "ImageField_container",
+  preview: "ImageField_preview",
+  image: "ImageField_image",
+  overlay: "ImageField_overlay",
+  changeButton: "ImageField_changeButton",
+  removeButton: "ImageField_removeButton",
+  selectButton: "ImageField_selectButton"
+};
+
+// src/components/ImageField/ImageField.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function ImageField({
+  value,
+  onChange,
+  field,
+  languages,
+  imageOptions
+}) {
+  const [isModalOpen, setIsModalOpen] = useState4(false);
+  const handleSelect = (item) => {
+    onChange(item);
+    setIsModalOpen(false);
+  };
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    onChange(null);
+  };
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+  const getAltDisplay = () => {
+    if (!value?.alt) return "";
+    for (const lang of languages) {
+      if (value.alt[lang.code]) {
+        return value.alt[lang.code];
+      }
+    }
+    return "";
+  };
+  return /* @__PURE__ */ jsxs10(FieldLabel, { label: field.label || "Image", children: [
+    /* @__PURE__ */ jsx10("div", { className: ImageField_default.container, children: value ? /* @__PURE__ */ jsxs10("div", { className: ImageField_default.preview, children: [
+      /* @__PURE__ */ jsx10(
+        "img",
+        {
+          src: value.url,
+          alt: getAltDisplay(),
+          className: ImageField_default.image
+        }
+      ),
+      /* @__PURE__ */ jsxs10("div", { className: ImageField_default.overlay, children: [
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            onClick: handleOpenModal,
+            className: ImageField_default.changeButton,
+            children: "Change"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            onClick: handleRemove,
+            className: ImageField_default.removeButton,
+            "aria-label": "Remove image",
+            children: /* @__PURE__ */ jsx10(X4, { size: 16 })
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsxs10(
+      "button",
+      {
+        type: "button",
+        onClick: handleOpenModal,
+        className: ImageField_default.selectButton,
+        children: [
+          /* @__PURE__ */ jsx10(ImagePlus, { size: 24 }),
+          /* @__PURE__ */ jsx10("span", { children: "Select image" })
+        ]
+      }
+    ) }),
+    isModalOpen && createPortal(
+      /* @__PURE__ */ jsx10(
+        ImagePickerModal,
+        {
+          languages,
+          imageOptions,
+          title: "Select Image",
+          selectedImage: value,
+          onSelect: handleSelect,
+          onClose: () => setIsModalOpen(false)
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+// src/components/GalleryField/GalleryField.tsx
+import { useState as useState6 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { FieldLabel as FieldLabel2 } from "@puckeditor/core";
+import { Images, X as X5 } from "lucide-react";
+
+// src/components/GalleryPickerModal/GalleryPickerModal.tsx
+import { useState as useState5, useEffect as useEffect5, useCallback as useCallback4, useRef as useRef4 } from "react";
+import { Plus, ArrowLeft as ArrowLeft2, Loader2 as Loader26, Check as Check3 } from "lucide-react";
+
+// src/components/GalleryPickerModal/GalleryPickerModal.module.css
+var GalleryPickerModal_default = {
+  backButton: "GalleryPickerModal_backButton",
+  selectModeButton: "GalleryPickerModal_selectModeButton",
+  toolbar: "GalleryPickerModal_toolbar",
+  createButton: "GalleryPickerModal_createButton",
+  createForm: "GalleryPickerModal_createForm",
+  createInput: "GalleryPickerModal_createInput",
+  createSubmitButton: "GalleryPickerModal_createSubmitButton",
+  createCancelButton: "GalleryPickerModal_createCancelButton",
+  uploadSection: "GalleryPickerModal_uploadSection",
+  galleryGrid: "GalleryPickerModal_galleryGrid",
+  galleryCard: "GalleryPickerModal_galleryCard",
+  galleryCardButton: "GalleryPickerModal_galleryCardButton",
+  selected: "GalleryPickerModal_selected",
+  checkbox: "GalleryPickerModal_checkbox",
+  checkboxChecked: "GalleryPickerModal_checkboxChecked",
+  galleryCover: "GalleryPickerModal_galleryCover",
+  galleryCoverPlaceholder: "GalleryPickerModal_galleryCoverPlaceholder",
+  galleryInfo: "GalleryPickerModal_galleryInfo",
+  galleryName: "GalleryPickerModal_galleryName",
+  galleryCount: "GalleryPickerModal_galleryCount",
+  footer: "GalleryPickerModal_footer",
+  footerInfo: "GalleryPickerModal_footerInfo",
+  footerText: "GalleryPickerModal_footerText",
+  selectButton: "GalleryPickerModal_selectButton",
+  editContent: "GalleryPickerModal_editContent",
+  editPreview: "GalleryPickerModal_editPreview",
+  editImage: "GalleryPickerModal_editImage",
+  editInfo: "GalleryPickerModal_editInfo",
+  editInfoRow: "GalleryPickerModal_editInfoRow",
+  editInfoLabel: "GalleryPickerModal_editInfoLabel",
+  editInfoValue: "GalleryPickerModal_editInfoValue",
+  editField: "GalleryPickerModal_editField",
+  editFieldHeader: "GalleryPickerModal_editFieldHeader",
+  editFieldLabel: "GalleryPickerModal_editFieldLabel",
+  langTabs: "GalleryPickerModal_langTabs",
+  langTab: "GalleryPickerModal_langTab",
+  langTabActive: "GalleryPickerModal_langTabActive",
+  editInput: "GalleryPickerModal_editInput",
+  editFooter: "GalleryPickerModal_editFooter",
+  saveButton: "GalleryPickerModal_saveButton",
+  spinner: "GalleryPickerModal_spinner",
+  spin: "GalleryPickerModal_spin"
+};
+
+// src/components/GalleryPickerModal/GalleryPickerModal.tsx
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var DEFAULT_UPLOAD_CONFIG2 = {
+  accept: "image/*",
+  maxSize: 10 * 1024 * 1024,
+  multiple: true
+};
+var PAGE_SIZE2 = 20;
+function GalleryPickerModal({
+  languages,
+  galleryOptions,
+  title = "Select Gallery",
+  selectedGallery: _initialSelectedGallery,
+  onSelect,
+  onClose,
+  selectable = true
+}) {
+  void _initialSelectedGallery;
+  const { fetchList, fetch, create, delete: deleteGallery, upload, removeImage, updateImage } = galleryOptions;
+  const [viewMode, setViewMode] = useState5("list");
+  const [editingImage, setEditingImage] = useState5(null);
+  const [galleries, setGalleries] = useState5([]);
+  const [selectedGalleryItem, setSelectedGalleryItem] = useState5(null);
+  const [search, setSearch] = useState5("");
+  const [loading, setLoading] = useState5(true);
+  const [page, setPage] = useState5(1);
+  const [hasMore, setHasMore] = useState5(false);
+  const [gallerySelectMode, setGallerySelectMode] = useState5(false);
+  const [selectedGalleryIds, setSelectedGalleryIds] = useState5(/* @__PURE__ */ new Set());
+  const [imageSelectMode, setImageSelectMode] = useState5(false);
+  const [selectedImageIds, setSelectedImageIds] = useState5(/* @__PURE__ */ new Set());
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState5(false);
+  const [deleteTarget, setDeleteTarget] = useState5("gallery");
+  const [isDeleting, setIsDeleting] = useState5(false);
+  const [isCreating, setIsCreating] = useState5(false);
+  const [newGalleryName, setNewGalleryName] = useState5("");
+  const [createLoading, setCreateLoading] = useState5(false);
+  const [altValues, setAltValues] = useState5({});
+  const [activeLang, setActiveLang] = useState5(languages[0]?.code || "it");
+  const [isSaving, setIsSaving] = useState5(false);
+  const newGalleryInputRef = useRef4(null);
+  const {
+    uploading,
+    isUploading,
+    addFiles,
+    cancelUpload,
+    clearCompleted,
+    uploadConfig: mergedUploadConfig
+  } = useUpload({
+    upload: async (file, callbacks) => {
+      if (!selectedGalleryItem) throw new Error("No gallery selected");
+      const result = await upload(selectedGalleryItem.id, file, callbacks);
+      return Array.isArray(result) ? result[0] : result;
+    },
+    config: DEFAULT_UPLOAD_CONFIG2,
+    onUploadComplete: (newItem) => {
+      if (selectedGalleryItem) {
+        setSelectedGalleryItem((prev) => {
+          if (!prev) return prev;
+          return {
+            ...prev,
+            images: [newItem, ...prev.images],
+            imageCount: (prev.imageCount || 0) + 1
+          };
+        });
+      }
+    }
+  });
+  const loadGalleries = useCallback4(
+    async (searchQuery, pageNum, append = false) => {
+      setLoading(true);
+      try {
+        const result = await fetchList({
+          query: searchQuery || void 0,
+          page: pageNum,
+          pageSize: PAGE_SIZE2
+        });
+        const newItems = Array.isArray(result) ? result : result.items;
+        const more = Array.isArray(result) ? newItems.length === PAGE_SIZE2 : result.hasMore ?? false;
+        setGalleries((prev) => append ? [...prev, ...newItems] : newItems);
+        setHasMore(more);
+      } catch (error) {
+        console.error("Failed to fetch galleries:", error);
+        setGalleries([]);
+        setHasMore(false);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [fetchList]
+  );
+  const loadGalleryDetail = useCallback4(
+    async (id) => {
+      setLoading(true);
+      try {
+        const gallery = await fetch(id);
+        setSelectedGalleryItem(gallery);
+      } catch (error) {
+        console.error("Failed to fetch gallery:", error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [fetch]
+  );
+  useEffect5(() => {
+    if (viewMode === "list") {
+      const timer = setTimeout(() => {
+        setPage(1);
+        loadGalleries(search, 1);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [search, loadGalleries, viewMode]);
+  useEffect5(() => {
+    if (isCreating && newGalleryInputRef.current) {
+      newGalleryInputRef.current.focus();
+    }
+  }, [isCreating]);
+  const handleClose = useCallback4(() => {
+    onClose();
+  }, [onClose]);
+  const handleLoadMore = () => {
+    const nextPage = page + 1;
+    setPage(nextPage);
+    loadGalleries(search, nextPage, true);
+  };
+  const handleGalleryClick = (gallery) => {
+    if (gallerySelectMode) {
+      setSelectedGalleryIds((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(gallery.id)) {
+          newSet.delete(gallery.id);
+        } else {
+          newSet.add(gallery.id);
+        }
+        return newSet;
+      });
+    } else {
+      setViewMode("detail");
+      loadGalleryDetail(gallery.id);
+    }
+  };
+  const handleCreateGallery = async () => {
+    if (!newGalleryName.trim()) return;
+    setCreateLoading(true);
+    try {
+      const newGallery = await create(newGalleryName.trim());
+      setGalleries((prev) => [newGallery, ...prev]);
+      setIsCreating(false);
+      setNewGalleryName("");
+    } catch (error) {
+      console.error("Failed to create gallery:", error);
+    } finally {
+      setCreateLoading(false);
+    }
+  };
+  const handleSelectAllGalleries = () => {
+    if (selectedGalleryIds.size === galleries.length) {
+      setSelectedGalleryIds(/* @__PURE__ */ new Set());
+    } else {
+      setSelectedGalleryIds(new Set(galleries.map((g) => g.id)));
+    }
+  };
+  const handleSelectAllImages = () => {
+    if (!selectedGalleryItem) return;
+    if (selectedImageIds.size === selectedGalleryItem.images.length) {
+      setSelectedImageIds(/* @__PURE__ */ new Set());
+    } else {
+      setSelectedImageIds(new Set(selectedGalleryItem.images.map((img) => img.id)));
+    }
+  };
+  const handleToggleImageSelect = (image) => {
+    setSelectedImageIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(image.id)) {
+        newSet.delete(image.id);
+      } else {
+        newSet.add(image.id);
+      }
+      return newSet;
+    });
+  };
+  const handleConfirmDelete = async () => {
+    setIsDeleting(true);
+    try {
+      if (deleteTarget === "gallery") {
+        const deletePromises = Array.from(selectedGalleryIds).map((id) => deleteGallery(id));
+        await Promise.all(deletePromises);
+        setGalleries((prev) => prev.filter((g) => !selectedGalleryIds.has(g.id)));
+        setSelectedGalleryIds(/* @__PURE__ */ new Set());
+        setGallerySelectMode(false);
+      } else {
+        if (!selectedGalleryItem) return;
+        const removePromises = Array.from(selectedImageIds).map(
+          (imageId) => removeImage(selectedGalleryItem.id, imageId)
+        );
+        await Promise.all(removePromises);
+        setSelectedGalleryItem((prev) => {
+          if (!prev) return prev;
+          return {
+            ...prev,
+            images: prev.images.filter((img) => !selectedImageIds.has(img.id)),
+            imageCount: (prev.imageCount || prev.images.length) - selectedImageIds.size
+          };
+        });
+        setSelectedImageIds(/* @__PURE__ */ new Set());
+        setImageSelectMode(false);
+      }
+      setShowDeleteConfirm(false);
+    } catch (error) {
+      console.error("Failed to delete:", error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+  const handleEditAlt = (image) => {
+    setEditingImage(image);
+    setAltValues(image.alt || {});
+    setActiveLang(languages[0]?.code || "it");
+    setViewMode("editImage");
+  };
+  const handleAltChange = (langCode, value) => {
+    setAltValues((prev) => ({
+      ...prev,
+      [langCode]: value
+    }));
+  };
+  const handleSaveAlt = async () => {
+    if (!selectedGalleryItem || !editingImage || !updateImage) return;
+    setIsSaving(true);
+    try {
+      await updateImage(selectedGalleryItem.id, editingImage.id, { alt: altValues });
+      setSelectedGalleryItem((prev) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          images: prev.images.map(
+            (img) => img.id === editingImage.id ? { ...img, alt: altValues } : img
+          )
+        };
+      });
+      setViewMode("detail");
+      setEditingImage(null);
+      setAltValues({});
+    } catch (error) {
+      console.error("Failed to update alt text:", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleSelectGallery = () => {
+    if (selectedGalleryItem && onSelect) {
+      onSelect(selectedGalleryItem);
+    }
+  };
+  const formatFileSize2 = (bytes) => {
+    if (!bytes) return "";
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+  const isAllGalleriesSelected = galleries.length > 0 && selectedGalleryIds.size === galleries.length;
+  const isSomeGalleriesSelected = selectedGalleryIds.size > 0 && selectedGalleryIds.size < galleries.length;
+  const isAllImagesSelected = selectedGalleryItem && selectedGalleryItem.images.length > 0 && selectedImageIds.size === selectedGalleryItem.images.length;
+  const isSomeImagesSelected = selectedImageIds.size > 0 && selectedGalleryItem && selectedImageIds.size < selectedGalleryItem.images.length;
+  if (viewMode === "editImage" && editingImage) {
+    return /* @__PURE__ */ jsx11(
+      Modal,
+      {
+        title: "Edit Image Details",
+        onClose: handleClose,
+        headerLeft: /* @__PURE__ */ jsx11(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setViewMode("detail");
+              setEditingImage(null);
+              setAltValues({});
+            },
+            className: GalleryPickerModal_default.backButton,
+            "aria-label": "Back to gallery",
+            children: /* @__PURE__ */ jsx11(ArrowLeft2, { size: 20 })
+          }
+        ),
+        footer: /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.editFooter, children: [
+          /* @__PURE__ */ jsx11("div", {}),
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              onClick: handleSaveAlt,
+              className: GalleryPickerModal_default.saveButton,
+              disabled: isSaving || !updateImage,
+              children: isSaving ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
+                /* @__PURE__ */ jsx11(Loader26, { size: 16, className: GalleryPickerModal_default.spinner }),
+                "Saving..."
+              ] }) : "Save"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.editContent, children: [
+          /* @__PURE__ */ jsx11("div", { className: GalleryPickerModal_default.editPreview, children: /* @__PURE__ */ jsx11(
+            "img",
+            {
+              src: editingImage.url,
+              alt: editingImage.filename || "",
+              className: GalleryPickerModal_default.editImage
+            }
+          ) }),
+          /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.editInfo, children: [
+            /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.editInfoRow, children: [
+              /* @__PURE__ */ jsx11("span", { className: GalleryPickerModal_default.editInfoLabel, children: "Filename" }),
+              /* @__PURE__ */ jsx11("span", { className: GalleryPickerModal_default.editInfoValue, children: editingImage.filename })
+            ] }),
+            editingImage.width && editingImage.height && /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.editInfoRow, children: [
+              /* @__PURE__ */ jsx11("span", { className: GalleryPickerModal_default.editInfoLabel, children: "Dimensions" }),
+              /* @__PURE__ */ jsxs11("span", { className: GalleryPickerModal_default.editInfoValue, children: [
+                editingImage.width,
+                "\xD7",
+                editingImage.height
+              ] })
+            ] }),
+            editingImage.size && /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.editInfoRow, children: [
+              /* @__PURE__ */ jsx11("span", { className: GalleryPickerModal_default.editInfoLabel, children: "Size" }),
+              /* @__PURE__ */ jsx11("span", { className: GalleryPickerModal_default.editInfoValue, children: formatFileSize2(editingImage.size) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.editField, children: [
+            /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.editFieldHeader, children: [
+              /* @__PURE__ */ jsx11("label", { className: GalleryPickerModal_default.editFieldLabel, children: "Alt" }),
+              /* @__PURE__ */ jsx11("div", { className: GalleryPickerModal_default.langTabs, children: languages.map((lang) => /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setActiveLang(lang.code),
+                  className: `${GalleryPickerModal_default.langTab} ${activeLang === lang.code ? GalleryPickerModal_default.langTabActive : ""}`,
+                  children: lang.code.toUpperCase()
+                },
+                lang.code
+              )) })
+            ] }),
+            /* @__PURE__ */ jsx11(
+              "input",
+              {
+                type: "text",
+                value: altValues[activeLang] || "",
+                onChange: (e) => handleAltChange(activeLang, e.target.value),
+                placeholder: `Alt text in ${languages.find((l) => l.code === activeLang)?.label || activeLang}...`,
+                className: GalleryPickerModal_default.editInput
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+  if (viewMode === "detail" && selectedGalleryItem) {
+    const renderDetailFooter = () => {
+      if (imageSelectMode) {
+        return /* @__PURE__ */ jsx11(
+          SelectionToolbar,
+          {
+            selectedCount: selectedImageIds.size,
+            totalCount: selectedGalleryItem.images.length,
+            onSelectAll: handleSelectAllImages,
+            onCancel: () => {
+              setImageSelectMode(false);
+              setSelectedImageIds(/* @__PURE__ */ new Set());
+            },
+            onDelete: () => {
+              setDeleteTarget("image");
+              setShowDeleteConfirm(true);
+            },
+            isAllSelected: !!isAllImagesSelected,
+            isIndeterminate: !!isSomeImagesSelected,
+            deleteLabel: "Remove"
+          }
+        );
+      }
+      if (selectable) {
+        return /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.footer, children: [
+          /* @__PURE__ */ jsx11("div", { className: GalleryPickerModal_default.footerInfo, children: /* @__PURE__ */ jsxs11("span", { className: GalleryPickerModal_default.footerText, children: [
+            selectedGalleryItem.images.length,
+            " ",
+            selectedGalleryItem.images.length === 1 ? "image" : "images"
+          ] }) }),
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              onClick: handleSelectGallery,
+              className: GalleryPickerModal_default.selectButton,
+              children: "Select this Gallery"
+            }
+          )
+        ] });
+      }
+      return void 0;
+    };
+    return /* @__PURE__ */ jsx11(
+      Modal,
+      {
+        title: selectedGalleryItem.name,
+        onClose: handleClose,
+        headerLeft: /* @__PURE__ */ jsx11(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setViewMode("list");
+              setSelectedGalleryItem(null);
+            },
+            className: GalleryPickerModal_default.backButton,
+            "aria-label": "Back to galleries",
+            children: /* @__PURE__ */ jsx11(ArrowLeft2, { size: 20 })
+          }
+        ),
+        headerActions: !imageSelectMode && typeof removeImage === "function" ? /* @__PURE__ */ jsx11(
+          "button",
+          {
+            type: "button",
+            onClick: () => setImageSelectMode(true),
+            className: GalleryPickerModal_default.selectModeButton,
+            children: "Select Items"
+          }
+        ) : void 0,
+        toolbar: !imageSelectMode ? /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.uploadSection, children: [
+          /* @__PURE__ */ jsx11(
+            UploadDropzone,
+            {
+              onFilesSelected: addFiles,
+              config: mergedUploadConfig,
+              disabled: isUploading && uploading.length >= 10
+            }
+          ),
+          uploading.length > 0 && /* @__PURE__ */ jsx11(
+            UploadQueue,
+            {
+              files: uploading,
+              onCancel: cancelUpload,
+              onClearCompleted: clearCompleted
+            }
+          )
+        ] }) : void 0,
+        footer: renderDetailFooter(),
+        overlay: showDeleteConfirm ? /* @__PURE__ */ jsx11(
+          ConfirmDialog,
+          {
+            title: "Remove Images",
+            message: `Are you sure you want to remove ${selectedImageIds.size} ${selectedImageIds.size > 1 ? "images" : "image"} from this gallery?`,
+            confirmLabel: isDeleting ? "Removing..." : `Remove ${selectedImageIds.size} ${selectedImageIds.size > 1 ? "images" : "image"}`,
+            onConfirm: handleConfirmDelete,
+            onCancel: () => setShowDeleteConfirm(false),
+            loading: isDeleting,
+            variant: "danger"
+          }
+        ) : void 0,
+        loading,
+        empty: !loading && selectedGalleryItem.images.length === 0,
+        emptyMessage: "No images in this gallery. Upload some images above.",
+        children: /* @__PURE__ */ jsx11(
+          ImageGrid,
+          {
+            items: selectedGalleryItem.images,
+            onSelect: () => {
+            },
+            onEditAlt: updateImage ? handleEditAlt : void 0,
+            manageMode: imageSelectMode,
+            selectedIds: selectedImageIds,
+            onToggleSelect: handleToggleImageSelect
+          }
+        )
+      }
+    );
+  }
+  const renderListFooter = () => {
+    if (gallerySelectMode) {
+      return /* @__PURE__ */ jsx11(
+        SelectionToolbar,
+        {
+          selectedCount: selectedGalleryIds.size,
+          totalCount: galleries.length,
+          onSelectAll: handleSelectAllGalleries,
+          onCancel: () => {
+            setGallerySelectMode(false);
+            setSelectedGalleryIds(/* @__PURE__ */ new Set());
+          },
+          onDelete: () => {
+            setDeleteTarget("gallery");
+            setShowDeleteConfirm(true);
+          },
+          isAllSelected: isAllGalleriesSelected,
+          isIndeterminate: isSomeGalleriesSelected
+        }
+      );
+    }
+    return void 0;
+  };
+  return /* @__PURE__ */ jsxs11(
+    Modal,
+    {
+      title,
+      onClose: handleClose,
+      headerActions: !gallerySelectMode && typeof deleteGallery === "function" ? /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          onClick: () => setGallerySelectMode(true),
+          className: GalleryPickerModal_default.selectModeButton,
+          children: "Select Items"
+        }
+      ) : void 0,
+      toolbar: !gallerySelectMode ? /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.toolbar, children: [
+        /* @__PURE__ */ jsx11(
+          SearchBar,
+          {
+            value: search,
+            onChange: setSearch,
+            placeholder: "Search galleries...",
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsCreating(true),
+            className: GalleryPickerModal_default.createButton,
+            children: [
+              /* @__PURE__ */ jsx11(Plus, { size: 18 }),
+              "New Gallery"
+            ]
+          }
+        )
+      ] }) : void 0,
+      footer: renderListFooter(),
+      overlay: showDeleteConfirm ? /* @__PURE__ */ jsx11(
+        ConfirmDialog,
+        {
+          title: "Delete Galleries",
+          message: `Are you sure you want to delete ${selectedGalleryIds.size} ${selectedGalleryIds.size > 1 ? "galleries" : "gallery"}? This action cannot be undone.`,
+          confirmLabel: isDeleting ? "Deleting..." : `Delete ${selectedGalleryIds.size} ${selectedGalleryIds.size > 1 ? "galleries" : "gallery"}`,
+          onConfirm: handleConfirmDelete,
+          onCancel: () => setShowDeleteConfirm(false),
+          loading: isDeleting,
+          variant: "danger"
+        }
+      ) : void 0,
+      loading: loading && galleries.length === 0,
+      empty: !loading && galleries.length === 0,
+      emptyMessage: "No galleries found",
+      children: [
+        isCreating && /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.createForm, children: [
+          /* @__PURE__ */ jsx11(
+            "input",
+            {
+              ref: newGalleryInputRef,
+              type: "text",
+              value: newGalleryName,
+              onChange: (e) => setNewGalleryName(e.target.value),
+              placeholder: "Gallery name...",
+              className: GalleryPickerModal_default.createInput,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleCreateGallery();
+                if (e.key === "Escape") {
+                  setIsCreating(false);
+                  setNewGalleryName("");
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              onClick: handleCreateGallery,
+              disabled: !newGalleryName.trim() || createLoading,
+              className: GalleryPickerModal_default.createSubmitButton,
+              children: createLoading ? /* @__PURE__ */ jsx11(Loader26, { size: 16, className: GalleryPickerModal_default.spinner }) : "Create"
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setIsCreating(false);
+                setNewGalleryName("");
+              },
+              className: GalleryPickerModal_default.createCancelButton,
+              children: "Cancel"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx11("div", { className: GalleryPickerModal_default.galleryGrid, children: galleries.map((gallery) => {
+          const isSelected = selectedGalleryIds.has(gallery.id);
+          return /* @__PURE__ */ jsx11("div", { className: GalleryPickerModal_default.galleryCard, children: /* @__PURE__ */ jsxs11(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleGalleryClick(gallery),
+              className: `${GalleryPickerModal_default.galleryCardButton} ${gallerySelectMode && isSelected ? GalleryPickerModal_default.selected : ""}`,
+              children: [
+                gallerySelectMode && /* @__PURE__ */ jsx11("div", { className: `${GalleryPickerModal_default.checkbox} ${isSelected ? GalleryPickerModal_default.checkboxChecked : ""}`, children: isSelected && /* @__PURE__ */ jsx11(Check3, { size: 14, strokeWidth: 3 }) }),
+                /* @__PURE__ */ jsx11("div", { className: GalleryPickerModal_default.galleryCover, children: gallery.coverImage ? /* @__PURE__ */ jsx11(
+                  "img",
+                  {
+                    src: gallery.coverImage.thumbnailUrl || gallery.coverImage.url,
+                    alt: ""
+                  }
+                ) : /* @__PURE__ */ jsx11("div", { className: GalleryPickerModal_default.galleryCoverPlaceholder }) }),
+                /* @__PURE__ */ jsxs11("div", { className: GalleryPickerModal_default.galleryInfo, children: [
+                  /* @__PURE__ */ jsx11("span", { className: GalleryPickerModal_default.galleryName, children: gallery.name }),
+                  /* @__PURE__ */ jsxs11("span", { className: GalleryPickerModal_default.galleryCount, children: [
+                    gallery.imageCount ?? gallery.images.length,
+                    " ",
+                    (gallery.imageCount ?? gallery.images.length) === 1 ? "image" : "images"
+                  ] })
+                ] })
+              ]
+            }
+          ) }, gallery.id);
+        }) }),
+        hasMore && /* @__PURE__ */ jsx11(LoadMoreButton, { onClick: handleLoadMore, loading })
+      ]
+    }
+  );
+}
+
+// src/components/GalleryField/GalleryField.module.css
+var GalleryField_default = {
+  container: "GalleryField_container",
+  preview: "GalleryField_preview",
+  header: "GalleryField_header",
+  name: "GalleryField_name",
+  count: "GalleryField_count",
+  thumbnails: "GalleryField_thumbnails",
+  thumbnail: "GalleryField_thumbnail",
+  more: "GalleryField_more",
+  actions: "GalleryField_actions",
+  changeButton: "GalleryField_changeButton",
+  removeButton: "GalleryField_removeButton",
+  selectButton: "GalleryField_selectButton"
+};
+
+// src/components/GalleryField/GalleryField.tsx
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function GalleryField({
+  value,
+  onChange,
+  field,
+  languages,
+  galleryOptions
+}) {
+  const [isModalOpen, setIsModalOpen] = useState6(false);
+  const handleSelect = (gallery) => {
+    onChange(gallery);
+    setIsModalOpen(false);
+  };
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    onChange(null);
+  };
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+  const previewImages = value?.images?.slice(0, 4) || [];
+  const remainingCount = (value?.images?.length || 0) - 4;
+  return /* @__PURE__ */ jsxs12(FieldLabel2, { label: field.label || "Gallery", children: [
+    /* @__PURE__ */ jsx12("div", { className: GalleryField_default.container, children: value ? /* @__PURE__ */ jsxs12("div", { className: GalleryField_default.preview, children: [
+      /* @__PURE__ */ jsxs12("div", { className: GalleryField_default.header, children: [
+        /* @__PURE__ */ jsx12("span", { className: GalleryField_default.name, children: value.name }),
+        /* @__PURE__ */ jsxs12("span", { className: GalleryField_default.count, children: [
+          value.images.length,
+          " ",
+          value.images.length === 1 ? "image" : "images"
+        ] })
+      ] }),
+      previewImages.length > 0 && /* @__PURE__ */ jsxs12("div", { className: GalleryField_default.thumbnails, children: [
+        previewImages.map((img) => /* @__PURE__ */ jsx12("div", { className: GalleryField_default.thumbnail, children: /* @__PURE__ */ jsx12("img", { src: img.url, alt: "" }) }, img.id)),
+        remainingCount > 0 && /* @__PURE__ */ jsxs12("div", { className: GalleryField_default.more, children: [
+          "+",
+          remainingCount
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs12("div", { className: GalleryField_default.actions, children: [
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            onClick: handleOpenModal,
+            className: GalleryField_default.changeButton,
+            children: "Change Gallery"
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            onClick: handleRemove,
+            className: GalleryField_default.removeButton,
+            "aria-label": "Remove gallery",
+            children: /* @__PURE__ */ jsx12(X5, { size: 16 })
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsxs12(
+      "button",
+      {
+        type: "button",
+        onClick: handleOpenModal,
+        className: GalleryField_default.selectButton,
+        children: [
+          /* @__PURE__ */ jsx12(Images, { size: 24 }),
+          /* @__PURE__ */ jsx12("span", { children: "Select gallery" })
+        ]
+      }
+    ) }),
+    isModalOpen && createPortal2(
+      /* @__PURE__ */ jsx12(
+        GalleryPickerModal,
+        {
+          languages,
+          galleryOptions,
+          title: "Select Gallery",
+          onSelect: handleSelect,
+          onClose: () => setIsModalOpen(false)
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+// src/components/DocumentField/DocumentField.tsx
+import { useState as useState8 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { FieldLabel as FieldLabel3 } from "@puckeditor/core";
+import { FileText as FileText2, File as File2, X as X6 } from "lucide-react";
+
+// src/components/DocumentPickerModal/DocumentPickerModal.tsx
+import { useState as useState7, useEffect as useEffect6, useCallback as useCallback5 } from "react";
+import { FileText, File, ArrowLeft as ArrowLeft3, Loader2 as Loader27, Check as Check4, Pencil as Pencil2 } from "lucide-react";
+
+// src/components/DocumentPickerModal/DocumentPickerModal.module.css
+var DocumentPickerModal_default = {
+  backButton: "DocumentPickerModal_backButton",
+  selectModeButton: "DocumentPickerModal_selectModeButton",
+  toolbar: "DocumentPickerModal_toolbar",
+  uploadSection: "DocumentPickerModal_uploadSection",
+  documentList: "DocumentPickerModal_documentList",
+  documentItemContainer: "DocumentPickerModal_documentItemContainer",
+  documentItem: "DocumentPickerModal_documentItem",
+  selected: "DocumentPickerModal_selected",
+  checkbox: "DocumentPickerModal_checkbox",
+  checkboxChecked: "DocumentPickerModal_checkboxChecked",
+  documentIcon: "DocumentPickerModal_documentIcon",
+  pdfIcon: "DocumentPickerModal_pdfIcon",
+  fileIcon: "DocumentPickerModal_fileIcon",
+  documentInfo: "DocumentPickerModal_documentInfo",
+  documentName: "DocumentPickerModal_documentName",
+  documentMeta: "DocumentPickerModal_documentMeta",
+  checkmark: "DocumentPickerModal_checkmark",
+  editButton: "DocumentPickerModal_editButton",
+  footer: "DocumentPickerModal_footer",
+  footerInfo: "DocumentPickerModal_footerInfo",
+  footerIcon: "DocumentPickerModal_footerIcon",
+  footerFilename: "DocumentPickerModal_footerFilename",
+  footerMeta: "DocumentPickerModal_footerMeta",
+  selectButton: "DocumentPickerModal_selectButton",
+  editContent: "DocumentPickerModal_editContent",
+  editPreview: "DocumentPickerModal_editPreview",
+  editIcon: "DocumentPickerModal_editIcon",
+  editInfo: "DocumentPickerModal_editInfo",
+  editInfoRow: "DocumentPickerModal_editInfoRow",
+  editInfoLabel: "DocumentPickerModal_editInfoLabel",
+  editInfoValue: "DocumentPickerModal_editInfoValue",
+  editField: "DocumentPickerModal_editField",
+  editFieldHeader: "DocumentPickerModal_editFieldHeader",
+  editFieldLabel: "DocumentPickerModal_editFieldLabel",
+  langTabs: "DocumentPickerModal_langTabs",
+  langTab: "DocumentPickerModal_langTab",
+  langTabActive: "DocumentPickerModal_langTabActive",
+  editInput: "DocumentPickerModal_editInput",
+  editFooter: "DocumentPickerModal_editFooter",
+  saveButton: "DocumentPickerModal_saveButton",
+  spinner: "DocumentPickerModal_spinner",
+  spin: "DocumentPickerModal_spin"
+};
+
+// src/components/DocumentPickerModal/DocumentPickerModal.tsx
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var DEFAULT_UPLOAD_CONFIG3 = {
+  accept: ".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",
+  maxSize: 20 * 1024 * 1024,
+  multiple: true
+};
+var PAGE_SIZE3 = 20;
+function DocumentPickerModal({
+  languages,
+  documentOptions,
+  title = "Select Document",
+  selectedDocument,
+  onSelect,
+  onClose,
+  selectable = true
+}) {
+  const { fetchList, upload, update, delete: deleteDocument, uploadConfig } = documentOptions;
+  const [view, setView] = useState7("picker");
+  const [editingItem, setEditingItem] = useState7(null);
+  const [selectMode, setSelectMode] = useState7(false);
+  const [selectedForDelete, setSelectedForDelete] = useState7(/* @__PURE__ */ new Set());
+  const [items, setItems] = useState7([]);
+  const [search, setSearch] = useState7("");
+  const [loading, setLoading] = useState7(true);
+  const [page, setPage] = useState7(1);
+  const [hasMore, setHasMore] = useState7(false);
+  const [selectedItem, setSelectedItem] = useState7(null);
+  const [titleValues, setTitleValues] = useState7({});
+  const [activeLang, setActiveLang] = useState7(languages[0]?.code || "it");
+  const [isSaving, setIsSaving] = useState7(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState7(false);
+  const [isDeleting, setIsDeleting] = useState7(false);
+  const canUpload = !!upload;
+  const {
+    uploading,
+    isUploading,
+    addFiles,
+    cancelUpload,
+    clearCompleted,
+    uploadConfig: mergedUploadConfig
+  } = useUpload({
+    upload: upload || (async () => {
+      throw new Error("Upload not configured");
+    }),
+    config: uploadConfig || DEFAULT_UPLOAD_CONFIG3,
+    onUploadComplete: (newItem) => {
+      setItems((prev) => [newItem, ...prev]);
+    }
+  });
+  const loadItems = useCallback5(
+    async (searchQuery, pageNum, append = false) => {
+      setLoading(true);
+      try {
+        const result = await fetchList({
+          query: searchQuery || void 0,
+          page: pageNum,
+          pageSize: PAGE_SIZE3
+        });
+        const newItems = Array.isArray(result) ? result : result.items;
+        const more = Array.isArray(result) ? newItems.length === PAGE_SIZE3 : result.hasMore ?? false;
+        setItems((prev) => append ? [...prev, ...newItems] : newItems);
+        setHasMore(more);
+      } catch (error) {
+        console.error("Failed to fetch documents:", error);
+        setItems([]);
+        setHasMore(false);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [fetchList]
+  );
+  useEffect6(() => {
+    const timer = setTimeout(() => {
+      setPage(1);
+      loadItems(search, 1);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [search, loadItems]);
+  useEffect6(() => {
+    if (selectedDocument) {
+      const existingItem = items.find((item) => item.id === selectedDocument.id);
+      if (existingItem) {
+        setSelectedItem(existingItem);
+      }
+    }
+  }, [selectedDocument, items]);
+  const handleClose = useCallback5(() => {
+    onClose();
+  }, [onClose]);
+  const handleLoadMore = () => {
+    const nextPage = page + 1;
+    setPage(nextPage);
+    loadItems(search, nextPage, true);
+  };
+  const handleDocumentClick = (item) => {
+    if (selectMode) {
+      setSelectedForDelete((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(item.id)) {
+          newSet.delete(item.id);
+        } else {
+          newSet.add(item.id);
+        }
+        return newSet;
+      });
+    } else {
+      if (selectedItem?.id === item.id) {
+        setSelectedItem(null);
+      } else {
+        setSelectedItem(item);
+      }
+    }
+  };
+  const handleConfirmSelection = () => {
+    if (!selectedItem || !onSelect) return;
+    onSelect(selectedItem);
+  };
+  const handleEditTitle = (item) => {
+    setEditingItem(item);
+    setTitleValues(item.title || {});
+    setActiveLang(languages[0]?.code || "it");
+    setView("edit");
+  };
+  const handleTitleChange = (langCode, value) => {
+    setTitleValues((prev) => ({
+      ...prev,
+      [langCode]: value
+    }));
+  };
+  const handleSaveTitle = async () => {
+    if (!editingItem || !update) return;
+    setIsSaving(true);
+    try {
+      await update(editingItem.id, { title: titleValues });
+      setItems(
+        (prev) => prev.map(
+          (item) => item.id === editingItem.id ? { ...item, title: titleValues } : item
+        )
+      );
+      if (selectedItem?.id === editingItem.id) {
+        setSelectedItem((prev) => prev ? { ...prev, title: titleValues } : null);
+      }
+      setView("picker");
+      setEditingItem(null);
+      setTitleValues({});
+    } catch (error) {
+      console.error("Failed to update title:", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleSelectAll = () => {
+    if (selectedForDelete.size === items.length) {
+      setSelectedForDelete(/* @__PURE__ */ new Set());
+    } else {
+      setSelectedForDelete(new Set(items.map((item) => item.id)));
+    }
+  };
+  const handleConfirmDelete = async () => {
+    if (!deleteDocument || selectedForDelete.size === 0) return;
+    setIsDeleting(true);
+    try {
+      const deletePromises = Array.from(selectedForDelete).map((id) => deleteDocument(id));
+      await Promise.all(deletePromises);
+      setItems((prev) => prev.filter((item) => !selectedForDelete.has(item.id)));
+      if (selectedItem && selectedForDelete.has(selectedItem.id)) {
+        setSelectedItem(null);
+      }
+      setShowDeleteConfirm(false);
+      setSelectedForDelete(/* @__PURE__ */ new Set());
+      setSelectMode(false);
+    } catch (error) {
+      console.error("Failed to delete documents:", error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+  const getIcon = (mimeType) => {
+    if (mimeType === "application/pdf") {
+      return /* @__PURE__ */ jsx13(FileText, { size: 20, className: DocumentPickerModal_default.pdfIcon });
+    }
+    return /* @__PURE__ */ jsx13(File, { size: 20, className: DocumentPickerModal_default.fileIcon });
+  };
+  const isAllSelected = items.length > 0 && selectedForDelete.size === items.length;
+  const isSomeSelected = selectedForDelete.size > 0 && selectedForDelete.size < items.length;
+  if (view === "edit" && editingItem) {
+    return /* @__PURE__ */ jsx13(
+      Modal,
+      {
+        title: "Edit Document Details",
+        onClose: handleClose,
+        size: "small",
+        headerLeft: /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setView("picker");
+              setEditingItem(null);
+              setTitleValues({});
+            },
+            className: DocumentPickerModal_default.backButton,
+            "aria-label": "Back to list",
+            children: /* @__PURE__ */ jsx13(ArrowLeft3, { size: 20 })
+          }
+        ),
+        footer: /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.editFooter, children: [
+          /* @__PURE__ */ jsx13("div", {}),
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              onClick: handleSaveTitle,
+              className: DocumentPickerModal_default.saveButton,
+              disabled: isSaving || !update,
+              children: isSaving ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
+                /* @__PURE__ */ jsx13(Loader27, { size: 16, className: DocumentPickerModal_default.spinner }),
+                "Saving..."
+              ] }) : "Save"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.editContent, children: [
+          /* @__PURE__ */ jsx13("div", { className: DocumentPickerModal_default.editPreview, children: /* @__PURE__ */ jsx13("div", { className: DocumentPickerModal_default.editIcon, children: getIcon(editingItem.mimeType) }) }),
+          /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.editInfo, children: [
+            /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.editInfoRow, children: [
+              /* @__PURE__ */ jsx13("span", { className: DocumentPickerModal_default.editInfoLabel, children: "Filename" }),
+              /* @__PURE__ */ jsx13("span", { className: DocumentPickerModal_default.editInfoValue, children: editingItem.filename })
+            ] }),
+            /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.editInfoRow, children: [
+              /* @__PURE__ */ jsx13("span", { className: DocumentPickerModal_default.editInfoLabel, children: "Type" }),
+              /* @__PURE__ */ jsx13("span", { className: DocumentPickerModal_default.editInfoValue, children: editingItem.extension?.toUpperCase() })
+            ] }),
+            /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.editInfoRow, children: [
+              /* @__PURE__ */ jsx13("span", { className: DocumentPickerModal_default.editInfoLabel, children: "Size" }),
+              /* @__PURE__ */ jsx13("span", { className: DocumentPickerModal_default.editInfoValue, children: formatFileSize(editingItem.size) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.editField, children: [
+            /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.editFieldHeader, children: [
+              /* @__PURE__ */ jsx13("label", { className: DocumentPickerModal_default.editFieldLabel, children: "Title" }),
+              /* @__PURE__ */ jsx13("div", { className: DocumentPickerModal_default.langTabs, children: languages.map((lang) => /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setActiveLang(lang.code),
+                  className: `${DocumentPickerModal_default.langTab} ${activeLang === lang.code ? DocumentPickerModal_default.langTabActive : ""}`,
+                  children: lang.code.toUpperCase()
+                },
+                lang.code
+              )) })
+            ] }),
+            /* @__PURE__ */ jsx13(
+              "input",
+              {
+                type: "text",
+                value: titleValues[activeLang] || "",
+                onChange: (e) => handleTitleChange(activeLang, e.target.value),
+                placeholder: `Title in ${languages.find((l) => l.code === activeLang)?.label || activeLang}...`,
+                className: DocumentPickerModal_default.editInput
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+  const renderFooter = () => {
+    if (selectMode) {
+      return /* @__PURE__ */ jsx13(
+        SelectionToolbar,
+        {
+          selectedCount: selectedForDelete.size,
+          totalCount: items.length,
+          onSelectAll: handleSelectAll,
+          onCancel: () => {
+            setSelectMode(false);
+            setSelectedForDelete(/* @__PURE__ */ new Set());
+          },
+          onDelete: () => setShowDeleteConfirm(true),
+          isAllSelected,
+          isIndeterminate: isSomeSelected
+        }
+      );
+    }
+    if (selectedItem && selectable) {
+      return /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.footer, children: [
+        /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.footerInfo, children: [
+          /* @__PURE__ */ jsx13("div", { className: DocumentPickerModal_default.footerIcon, children: getIcon(selectedItem.mimeType) }),
+          /* @__PURE__ */ jsx13("span", { className: DocumentPickerModal_default.footerFilename, children: selectedItem.filename }),
+          /* @__PURE__ */ jsxs13("span", { className: DocumentPickerModal_default.footerMeta, children: [
+            selectedItem.extension?.toUpperCase(),
+            " - ",
+            formatFileSize(selectedItem.size)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            onClick: handleConfirmSelection,
+            className: DocumentPickerModal_default.selectButton,
+            children: "Select Document"
+          }
+        )
+      ] });
+    }
+    return void 0;
+  };
+  return /* @__PURE__ */ jsxs13(
+    Modal,
+    {
+      title,
+      onClose: handleClose,
+      size: "small",
+      headerActions: !selectMode && deleteDocument ? /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSelectMode(true),
+          className: DocumentPickerModal_default.selectModeButton,
+          children: "Select Items"
+        }
+      ) : void 0,
+      toolbar: /* @__PURE__ */ jsx13("div", { className: DocumentPickerModal_default.toolbar, children: /* @__PURE__ */ jsx13(
+        SearchBar,
+        {
+          value: search,
+          onChange: setSearch,
+          placeholder: "Search documents...",
+          autoFocus: !selectMode
+        }
+      ) }),
+      footer: renderFooter(),
+      overlay: showDeleteConfirm ? /* @__PURE__ */ jsx13(
+        ConfirmDialog,
+        {
+          title: "Delete Documents",
+          message: `Are you sure you want to delete ${selectedForDelete.size} document${selectedForDelete.size > 1 ? "s" : ""}? This action cannot be undone.`,
+          confirmLabel: isDeleting ? "Deleting..." : `Delete ${selectedForDelete.size} document${selectedForDelete.size > 1 ? "s" : ""}`,
+          onConfirm: handleConfirmDelete,
+          onCancel: () => setShowDeleteConfirm(false),
+          loading: isDeleting,
+          variant: "danger"
+        }
+      ) : void 0,
+      loading: loading && items.length === 0,
+      empty: !loading && items.length === 0,
+      emptyMessage: "No documents found",
+      children: [
+        canUpload && !selectMode && /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.uploadSection, children: [
+          /* @__PURE__ */ jsx13(
+            UploadDropzone,
+            {
+              onFilesSelected: addFiles,
+              config: mergedUploadConfig,
+              disabled: isUploading && uploading.length >= 10
+            }
+          ),
+          uploading.length > 0 && /* @__PURE__ */ jsx13(
+            UploadQueue,
+            {
+              files: uploading,
+              onCancel: cancelUpload,
+              onClearCompleted: clearCompleted
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx13("div", { className: DocumentPickerModal_default.documentList, children: items.map((item) => {
+          const isSelected = selectMode ? selectedForDelete.has(item.id) : selectedItem?.id === item.id;
+          return /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.documentItemContainer, children: [
+            /* @__PURE__ */ jsxs13(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleDocumentClick(item),
+                className: `${DocumentPickerModal_default.documentItem} ${isSelected ? DocumentPickerModal_default.selected : ""}`,
+                children: [
+                  selectMode && /* @__PURE__ */ jsx13("div", { className: `${DocumentPickerModal_default.checkbox} ${isSelected ? DocumentPickerModal_default.checkboxChecked : ""}`, children: isSelected && /* @__PURE__ */ jsx13(Check4, { size: 14, strokeWidth: 3 }) }),
+                  /* @__PURE__ */ jsx13("div", { className: DocumentPickerModal_default.documentIcon, children: getIcon(item.mimeType) }),
+                  /* @__PURE__ */ jsxs13("div", { className: DocumentPickerModal_default.documentInfo, children: [
+                    /* @__PURE__ */ jsx13("span", { className: DocumentPickerModal_default.documentName, children: item.title?.[languages[0]?.code] || item.filename }),
+                    /* @__PURE__ */ jsxs13("span", { className: DocumentPickerModal_default.documentMeta, children: [
+                      item.extension?.toUpperCase(),
+                      " - ",
+                      formatFileSize(item.size)
+                    ] })
+                  ] }),
+                  !selectMode && selectedItem?.id === item.id && /* @__PURE__ */ jsx13("div", { className: DocumentPickerModal_default.checkmark, children: /* @__PURE__ */ jsx13(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 16 16",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: /* @__PURE__ */ jsx13(
+                        "path",
+                        {
+                          d: "M13.5 4.5L6 12L2.5 8.5",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    }
+                  ) })
+                ]
+              }
+            ),
+            !selectMode && update && /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleEditTitle(item);
+                },
+                className: DocumentPickerModal_default.editButton,
+                "aria-label": "Edit title",
+                children: /* @__PURE__ */ jsx13(Pencil2, { size: 14 })
+              }
+            )
+          ] }, item.id);
+        }) }),
+        hasMore && /* @__PURE__ */ jsx13(LoadMoreButton, { onClick: handleLoadMore, loading })
+      ]
+    }
+  );
+}
+
+// src/components/DocumentField/DocumentField.module.css
+var DocumentField_default = {
+  container: "DocumentField_container",
+  preview: "DocumentField_preview",
+  iconWrapper: "DocumentField_iconWrapper",
+  pdfIcon: "DocumentField_pdfIcon",
+  fileIcon: "DocumentField_fileIcon",
+  info: "DocumentField_info",
+  title: "DocumentField_title",
+  meta: "DocumentField_meta",
+  actions: "DocumentField_actions",
+  changeButton: "DocumentField_changeButton",
+  removeButton: "DocumentField_removeButton",
+  selectButton: "DocumentField_selectButton"
+};
+
+// src/components/DocumentField/DocumentField.tsx
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+function DocumentField({
+  value,
+  onChange,
+  field,
+  languages,
+  documentOptions
+}) {
+  const [isModalOpen, setIsModalOpen] = useState8(false);
+  const handleSelect = (item) => {
+    onChange(item);
+    setIsModalOpen(false);
+  };
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    onChange(null);
+  };
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+  const getTitleDisplay = () => {
+    if (value?.title) {
+      for (const lang of languages) {
+        if (value.title[lang.code]) {
+          return value.title[lang.code];
+        }
+      }
+    }
+    return value?.filename || "";
+  };
+  const getIcon = () => {
+    if (value?.mimeType === "application/pdf") {
+      return /* @__PURE__ */ jsx14(FileText2, { size: 24, className: DocumentField_default.pdfIcon });
+    }
+    return /* @__PURE__ */ jsx14(File2, { size: 24, className: DocumentField_default.fileIcon });
+  };
+  return /* @__PURE__ */ jsxs14(FieldLabel3, { label: field.label || "Document", children: [
+    /* @__PURE__ */ jsx14("div", { className: DocumentField_default.container, children: value ? /* @__PURE__ */ jsxs14("div", { className: DocumentField_default.preview, children: [
+      /* @__PURE__ */ jsx14("div", { className: DocumentField_default.iconWrapper, children: getIcon() }),
+      /* @__PURE__ */ jsxs14("div", { className: DocumentField_default.info, children: [
+        /* @__PURE__ */ jsx14("span", { className: DocumentField_default.title, children: getTitleDisplay() }),
+        /* @__PURE__ */ jsxs14("span", { className: DocumentField_default.meta, children: [
+          value.extension?.toUpperCase(),
+          " \u2022 ",
+          formatFileSize(value.size)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: DocumentField_default.actions, children: [
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            onClick: handleOpenModal,
+            className: DocumentField_default.changeButton,
+            children: "Change"
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            onClick: handleRemove,
+            className: DocumentField_default.removeButton,
+            "aria-label": "Remove document",
+            children: /* @__PURE__ */ jsx14(X6, { size: 16 })
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsxs14(
+      "button",
+      {
+        type: "button",
+        onClick: handleOpenModal,
+        className: DocumentField_default.selectButton,
+        children: [
+          /* @__PURE__ */ jsx14(FileText2, { size: 24 }),
+          /* @__PURE__ */ jsx14("span", { children: "Select document" })
+        ]
+      }
+    ) }),
+    isModalOpen && createPortal3(
+      /* @__PURE__ */ jsx14(
+        DocumentPickerModal,
+        {
+          languages,
+          documentOptions,
+          title: "Select Document",
+          onSelect: handleSelect,
+          onClose: () => setIsModalOpen(false)
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+// src/components/MediaPanel/MediaPanel.tsx
+import { useState as useState9 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+import { Image, Images as Images2, FileText as FileText3 } from "lucide-react";
+
+// src/components/MediaPanel/MediaPanel.module.css
+var MediaPanel_default = {
+  panel: "MediaPanel_panel",
+  item: "MediaPanel_item"
+};
+
+// src/components/MediaPanel/MediaPanel.tsx
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+function MediaPanel({
+  languages,
+  imageOptions,
+  galleryOptions,
+  documentOptions
+}) {
+  const [openModal, setOpenModal] = useState9(null);
+  const handleCloseModal = () => {
+    setOpenModal(null);
+  };
+  return /* @__PURE__ */ jsxs15("div", { className: MediaPanel_default.panel, children: [
+    /* @__PURE__ */ jsxs15(
+      "button",
+      {
+        type: "button",
+        className: MediaPanel_default.item,
+        onClick: () => setOpenModal("image"),
+        children: [
+          /* @__PURE__ */ jsx15(Image, { size: 20 }),
+          /* @__PURE__ */ jsx15("span", { children: "Images" })
+        ]
+      }
+    ),
+    galleryOptions && /* @__PURE__ */ jsxs15(
+      "button",
+      {
+        type: "button",
+        className: MediaPanel_default.item,
+        onClick: () => setOpenModal("gallery"),
+        children: [
+          /* @__PURE__ */ jsx15(Images2, { size: 20 }),
+          /* @__PURE__ */ jsx15("span", { children: "Gallery" })
+        ]
+      }
+    ),
+    documentOptions && /* @__PURE__ */ jsxs15(
+      "button",
+      {
+        type: "button",
+        className: MediaPanel_default.item,
+        onClick: () => setOpenModal("document"),
+        children: [
+          /* @__PURE__ */ jsx15(FileText3, { size: 20 }),
+          /* @__PURE__ */ jsx15("span", { children: "Documents" })
+        ]
+      }
+    ),
+    openModal === "image" && createPortal4(
+      /* @__PURE__ */ jsx15(
+        ImagePickerModal,
+        {
+          languages,
+          imageOptions,
+          title: "Media Library",
+          selectable: false,
+          onClose: handleCloseModal
+        }
+      ),
+      document.body
+    ),
+    openModal === "gallery" && galleryOptions && createPortal4(
+      /* @__PURE__ */ jsx15(
+        GalleryPickerModal,
+        {
+          languages,
+          galleryOptions,
+          title: "Gallery Library",
+          selectable: false,
+          onClose: handleCloseModal
+        }
+      ),
+      document.body
+    ),
+    openModal === "document" && documentOptions && createPortal4(
+      /* @__PURE__ */ jsx15(
+        DocumentPickerModal,
+        {
+          languages,
+          documentOptions,
+          title: "Document Library",
+          selectable: false,
+          onClose: handleCloseModal
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+// src/createMediaPlugin.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function createMediaPlugin(options) {
+  const {
+    languages = [
+      { code: "en", label: "English" },
+      { code: "it", label: "Italiano" }
+    ],
+    image,
+    gallery,
+    document: document2
+  } = options;
+  const fieldTypes = {
+    // Image field type (always available)
+    image: (props) => {
+      const fieldProps = props;
+      return /* @__PURE__ */ jsx16(
+        ImageField,
+        {
+          ...fieldProps,
+          languages,
+          imageOptions: image
+        }
+      );
+    }
+  };
+  if (gallery) {
+    fieldTypes.gallery = (props) => {
+      const fieldProps = props;
+      return /* @__PURE__ */ jsx16(
+        GalleryField,
+        {
+          ...fieldProps,
+          languages,
+          galleryOptions: gallery
+        }
+      );
+    };
+  }
+  if (document2) {
+    fieldTypes.document = (props) => {
+      const fieldProps = props;
+      return /* @__PURE__ */ jsx16(
+        DocumentField,
+        {
+          ...fieldProps,
+          languages,
+          documentOptions: document2
+        }
+      );
+    };
+  }
+  return {
+    name: "puck-media",
+    label: "Media",
+    icon: /* @__PURE__ */ jsx16(Image2, { size: 20 }),
+    render: () => /* @__PURE__ */ jsx16(
+      MediaPanel,
+      {
+        languages,
+        imageOptions: image,
+        galleryOptions: gallery,
+        documentOptions: document2
+      }
+    ),
+    overrides: {
+      fieldTypes
+    }
+  };
+}
+
+// src/types.ts
+var DEFAULT_LANGUAGES = [
+  { code: "en", label: "English" },
+  { code: "it", label: "Italiano" }
+];
+export {
+  DEFAULT_LANGUAGES,
+  DocumentField,
+  DocumentPickerModal,
+  GalleryField,
+  GalleryPickerModal,
+  ImageField,
+  ImageGrid,
+  ImagePickerModal,
+  MediaPanel,
+  UploadDropzone,
+  UploadQueue,
+  createMediaPlugin,
+  formatFileSize,
+  useUpload
+};
+//# sourceMappingURL=index.mjs.map