@withwiz/gallery 0.1.0

package/dist/components/index.mjs

@@ -0,0 +1,1215 @@
+"use client";
+import {
+  getGalleryConfig
+} from "../chunk-ZEZCUJJD.mjs";
+import {
+  useImageDropZone
+} from "../chunk-BC3TPJQY.mjs";
+import {
+  cn
+} from "../chunk-BTLELFKC.mjs";
+
+// src/components/ToggleSwitch.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ToggleSwitch(props) {
+  const { checked, onChange, disabled = false, label, size = "md", className } = props;
+  const handleToggle = () => {
+    if (disabled) return;
+    onChange(!checked);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      onChange(!checked);
+    }
+  };
+  return /* @__PURE__ */ jsxs("span", { className: cn("gallery-toggle", `gallery-toggle--${size}`, className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-disabled": disabled || void 0,
+        "aria-label": label,
+        disabled,
+        onClick: handleToggle,
+        onKeyDown: handleKeyDown,
+        className: cn(
+          "gallery-toggle__track",
+          checked && "gallery-toggle--checked",
+          disabled && "gallery-toggle--disabled"
+        ),
+        children: /* @__PURE__ */ jsx("span", { className: "gallery-toggle__thumb", "aria-hidden": "true" })
+      }
+    ),
+    label ? /* @__PURE__ */ jsx("span", { className: "gallery-toggle__label", children: label }) : null
+  ] });
+}
+
+// src/components/ImageDropZone.tsx
+import { useRef } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_TEXT = {
+  dropPrompt: "Drop image here or click to browse",
+  replacePrompt: "Drop a new image to replace",
+  rejected: "Some files were rejected"
+};
+function ImageDropZone(props) {
+  const {
+    onFiles,
+    accept,
+    maxSize,
+    multiple,
+    disabled = false,
+    previewUrl,
+    i18n,
+    className
+  } = props;
+  const inputRef = useRef(null);
+  const { isDragging, dropProps, inputProps, rejectedReasons } = useImageDropZone({
+    onFiles,
+    accept,
+    maxSize,
+    multiple,
+    disabled
+  });
+  const text = {
+    dropPrompt: i18n?.dropPrompt ?? DEFAULT_TEXT.dropPrompt,
+    replacePrompt: i18n?.replacePrompt ?? DEFAULT_TEXT.replacePrompt,
+    rejected: i18n?.rejected ?? DEFAULT_TEXT.rejected
+  };
+  const openPicker = () => {
+    if (disabled) return;
+    inputRef.current?.click();
+  };
+  const containerClass = cn(
+    "gallery-dropzone",
+    isDragging && "gallery-dropzone--dragging",
+    disabled && "gallery-dropzone--disabled",
+    previewUrl && "gallery-dropzone--has-preview",
+    className
+  );
+  return /* @__PURE__ */ jsxs2("div", { className: "gallery-dropzone-wrap", children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        ref: inputRef,
+        ...inputProps,
+        disabled,
+        className: "gallery-dropzone__input",
+        style: { position: "absolute", width: 1, height: 1, opacity: 0, pointerEvents: "none" },
+        "aria-hidden": "true",
+        tabIndex: -1
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: containerClass,
+        onClick: openPicker,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled || void 0,
+        onKeyDown: (e) => {
+          if (disabled) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            openPicker();
+          }
+        },
+        ...dropProps,
+        children: previewUrl ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2(
+            "img",
+            {
+              src: previewUrl,
+              alt: "",
+              className: "gallery-dropzone__preview"
+            }
+          ),
+          /* @__PURE__ */ jsx2("div", { className: "gallery-dropzone__prompt gallery-dropzone__prompt--overlay", children: text.replacePrompt })
+        ] }) : /* @__PURE__ */ jsx2("div", { className: "gallery-dropzone__prompt", children: text.dropPrompt })
+      }
+    ),
+    rejectedReasons.length > 0 ? /* @__PURE__ */ jsxs2("ul", { className: "gallery-dropzone__rejected", role: "alert", children: [
+      /* @__PURE__ */ jsx2("li", { className: "gallery-dropzone__rejected-title", children: text.rejected }),
+      rejectedReasons.map((reason, i) => /* @__PURE__ */ jsx2("li", { className: "gallery-dropzone__rejected-item", children: reason }, i))
+    ] }) : null
+  ] });
+}
+
+// src/components/GalleryManagerLayout.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_TEXT2 = {
+  "admin.emptyState": "Select an item to edit, or create a new one."
+};
+function t(i18n, key) {
+  return i18n?.[key] ?? DEFAULT_TEXT2[key] ?? key;
+}
+function GalleryManagerLayout(props) {
+  const {
+    listRoot,
+    filterControls,
+    toolbar,
+    editForm,
+    emptyState,
+    homePreview,
+    className,
+    i18n,
+    ui
+  } = props;
+  const slots = ui?.slots ?? {};
+  const classes = ui?.classNames ?? {};
+  const toolbarContent = slots.managerToolbar ?? toolbar;
+  const listContent = slots.listRoot ?? listRoot;
+  const editContent = slots.editFormRoot ?? editForm;
+  const previewContent = slots.homePreviewRoot ?? homePreview;
+  const emptyContent = slots.emptyState ?? emptyState ?? /* @__PURE__ */ jsx3("span", { children: t(i18n, "admin.emptyState") });
+  const hasPreview = previewContent !== void 0 && previewContent !== null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "gallery-manager",
+        hasPreview ? "gallery-manager--with-preview" : "gallery-manager--no-preview",
+        classes.managerRoot,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3("aside", { className: cn("gallery-manager__list", classes.listRoot), children: [
+          toolbarContent ? /* @__PURE__ */ jsx3("div", { className: cn("gallery-manager__toolbar", classes.managerToolbar), children: toolbarContent }) : null,
+          filterControls ? /* @__PURE__ */ jsx3("div", { className: "gallery-manager__filter", children: filterControls }) : null,
+          /* @__PURE__ */ jsx3("div", { className: "gallery-manager__list-body", children: listContent })
+        ] }),
+        /* @__PURE__ */ jsx3("section", { className: cn("gallery-manager__form", classes.editFormRoot), children: editContent !== null && editContent !== void 0 ? editContent : /* @__PURE__ */ jsx3("div", { className: cn("gallery-manager__empty", classes.emptyState), children: emptyContent }) }),
+        hasPreview ? /* @__PURE__ */ jsx3("aside", { className: cn("gallery-manager__preview", classes.homePreviewRoot), children: previewContent }) : null
+      ]
+    }
+  );
+}
+
+// src/components/GalleryEditForm.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef as useRef2,
+  useState
+} from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_TEXT3 = {
+  "form.caption": "Caption",
+  "form.captionPlaceholder": "Image description (optional)",
+  "form.category": "Category",
+  "form.sortOrder": "Sort order",
+  "form.published": "Published",
+  "form.featured": "Featured",
+  "form.save": "Save",
+  "form.cancel": "Cancel",
+  "form.imageDropPrompt": "Drop image here or click to browse",
+  "form.imageReplacePrompt": "Drop a new image to replace",
+  "admin.featuredOverLimit": "Featured cap reached \u2014 uncheck others first"
+};
+function t2(i18n, key) {
+  return i18n?.[key] ?? DEFAULT_TEXT3[key] ?? key;
+}
+function buildInitialForm(value, categories) {
+  if (value) {
+    return {
+      imageUrl: value.imageUrl,
+      imageKey: value.imageKey ?? "",
+      caption: value.caption ?? "",
+      categoryId: value.categoryId,
+      sortOrder: value.sortOrder,
+      featured: value.featured,
+      published: value.published
+    };
+  }
+  return {
+    imageUrl: "",
+    imageKey: "",
+    caption: "",
+    categoryId: categories[0]?.id ?? "",
+    sortOrder: 0,
+    featured: false,
+    published: false
+  };
+}
+function GalleryEditForm(props) {
+  const {
+    value,
+    categories,
+    onSubmit,
+    onCancel,
+    onDelete,
+    multipleMode = false,
+    onSubmitMany,
+    canToggleFeatured = true,
+    saving = false,
+    onImageSelect,
+    i18n,
+    className
+  } = props;
+  const isNew = value === null;
+  const [form, setForm] = useState(() => buildInitialForm(value, categories));
+  const [multiImages, setMultiImages] = useState([]);
+  const [imageError, setImageError] = useState(null);
+  const valueIdRef = useRef2(value?.id ?? null);
+  const dirtyRef = useRef2(false);
+  useEffect(() => {
+    const newId = value?.id ?? null;
+    if (newId !== valueIdRef.current) {
+      valueIdRef.current = newId;
+      if (!dirtyRef.current) {
+        setForm(buildInitialForm(value, categories));
+      }
+    } else if (value && !dirtyRef.current) {
+      setForm(buildInitialForm(value, categories));
+    }
+  }, [value, categories]);
+  useEffect(() => {
+    if (!form.categoryId && categories.length > 0) {
+      setForm((f) => ({ ...f, categoryId: categories[0].id }));
+    }
+  }, [categories, form.categoryId]);
+  const isMultiActive = isNew && multipleMode && multiImages.length > 1;
+  const featuredDisabled = !canToggleFeatured && !form.featured;
+  const updateField = useCallback((key, val) => {
+    dirtyRef.current = true;
+    setForm((prev) => ({ ...prev, [key]: val }));
+  }, []);
+  const handleFiles = useCallback(
+    async (files) => {
+      if (files.length === 0) return;
+      setImageError(null);
+      if (!onImageSelect) {
+        setImageError("onImageSelect prop missing \u2014 host must provide upload handler");
+        return;
+      }
+      try {
+        if (isNew && multipleMode) {
+          const uploaded = await Promise.all(files.map((f) => onImageSelect(f)));
+          setMultiImages((prev) => {
+            const next = [...prev, ...uploaded];
+            setForm((f) => {
+              if (!f.imageUrl && next.length > 0) {
+                return { ...f, imageUrl: next[0].url, imageKey: next[0].key ?? "" };
+              }
+              return f;
+            });
+            return next;
+          });
+        } else {
+          const r = await onImageSelect(files[0]);
+          setForm((f) => ({ ...f, imageUrl: r.url, imageKey: r.key ?? "" }));
+        }
+      } catch (err) {
+        setImageError(err instanceof Error ? err.message : "Image upload failed");
+      }
+    },
+    [isNew, multipleMode, onImageSelect]
+  );
+  const handleSubmit = useCallback(async () => {
+    if (isMultiActive && onSubmitMany) {
+      const items = multiImages.map((img, i) => ({
+        imageUrl: img.url,
+        imageKey: img.key || void 0,
+        caption: form.caption ? `${form.caption}_${i + 1}` : void 0,
+        categoryId: form.categoryId,
+        sortOrder: form.sortOrder + i,
+        featured: form.featured,
+        published: form.published
+      }));
+      await onSubmitMany(items);
+      return;
+    }
+    if (!form.imageUrl) {
+      setImageError("Image is required");
+      return;
+    }
+    const payload = {
+      imageUrl: form.imageUrl,
+      imageKey: form.imageKey || void 0,
+      caption: form.caption || void 0,
+      categoryId: form.categoryId,
+      sortOrder: form.sortOrder,
+      featured: form.featured,
+      published: form.published
+    };
+    await onSubmit(payload);
+  }, [form, isMultiActive, multiImages, onSubmit, onSubmitMany]);
+  const captionPreview = useMemo(() => {
+    if (!isMultiActive || !form.caption) return null;
+    return multiImages.slice(0, 3).map((_, i) => `${form.caption}_${i + 1}`).join(", ") + (multiImages.length > 3 ? ", ..." : "");
+  }, [isMultiActive, multiImages, form.caption]);
+  return /* @__PURE__ */ jsxs4("div", { className: cn("gallery-edit-form", className), children: [
+    /* @__PURE__ */ jsxs4("header", { className: "gallery-edit-form__header", children: [
+      /* @__PURE__ */ jsx4("h2", { className: "gallery-edit-form__title", children: isNew ? isMultiActive ? `Batch (${multiImages.length})` : "New image" : "Edit image" }),
+      /* @__PURE__ */ jsxs4("div", { className: "gallery-edit-form__actions", "data-toggle-group": true, children: [
+        /* @__PURE__ */ jsx4("span", { "data-toggle": "featured", children: /* @__PURE__ */ jsx4(
+          ToggleSwitch,
+          {
+            checked: form.featured,
+            onChange: (v) => updateField("featured", v),
+            label: t2(i18n, "form.featured"),
+            disabled: featuredDisabled,
+            size: "sm"
+          }
+        ) }),
+        featuredDisabled ? /* @__PURE__ */ jsx4("span", { className: "gallery-edit-form__note", children: t2(i18n, "admin.featuredOverLimit") }) : null,
+        /* @__PURE__ */ jsx4("span", { "data-toggle": "published", children: /* @__PURE__ */ jsx4(
+          ToggleSwitch,
+          {
+            checked: form.published,
+            onChange: (v) => updateField("published", v),
+            label: t2(i18n, "form.published"),
+            size: "sm"
+          }
+        ) }),
+        !isNew && onDelete ? /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            className: "gallery-edit-form__btn gallery-edit-form__btn--danger",
+            onClick: () => void onDelete(),
+            children: "Delete"
+          }
+        ) : null,
+        onCancel ? /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            className: "gallery-edit-form__btn",
+            onClick: onCancel,
+            children: t2(i18n, "form.cancel")
+          }
+        ) : null,
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            className: "gallery-edit-form__btn gallery-edit-form__btn--primary",
+            onClick: () => void handleSubmit(),
+            disabled: saving,
+            children: saving ? "Saving..." : isMultiActive ? `Save ${multiImages.length}` : t2(i18n, "form.save")
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "gallery-edit-form__section", children: [
+      /* @__PURE__ */ jsx4("div", { className: "gallery-edit-form__section-title", children: "Image" }),
+      /* @__PURE__ */ jsx4(
+        ImageDropZone,
+        {
+          onFiles: handleFiles,
+          previewUrl: form.imageUrl || null,
+          multiple: isNew && multipleMode,
+          i18n: {
+            dropPrompt: t2(i18n, "form.imageDropPrompt"),
+            replacePrompt: t2(i18n, "form.imageReplacePrompt")
+          }
+        }
+      ),
+      imageError ? /* @__PURE__ */ jsx4("div", { className: "gallery-edit-form__error", role: "alert", children: imageError }) : null,
+      isMultiActive ? /* @__PURE__ */ jsx4("div", { className: "gallery-edit-form__multi-grid", children: multiImages.map((img, i) => /* @__PURE__ */ jsxs4("div", { className: "gallery-edit-form__multi-tile", children: [
+        /* @__PURE__ */ jsx4("img", { src: img.url, alt: "", className: "gallery-edit-form__multi-img" }),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            className: "gallery-edit-form__multi-remove",
+            onClick: () => {
+              setMultiImages((prev) => {
+                const next = prev.filter((_, idx) => idx !== i);
+                setForm((f) => {
+                  if (next.length > 0) {
+                    return { ...f, imageUrl: next[0].url, imageKey: next[0].key ?? "" };
+                  }
+                  return { ...f, imageUrl: "", imageKey: "" };
+                });
+                return next;
+              });
+            },
+            "aria-label": "remove",
+            children: "\xD7"
+          }
+        )
+      ] }, img.key ?? `mi-${i}`)) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "gallery-edit-form__section", children: [
+      /* @__PURE__ */ jsx4("div", { className: "gallery-edit-form__section-title", children: t2(i18n, "form.caption") }),
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          type: "text",
+          name: "caption",
+          className: "gallery-edit-form__input",
+          value: form.caption,
+          maxLength: 200,
+          placeholder: t2(i18n, "form.captionPlaceholder"),
+          onChange: (e) => updateField("caption", e.target.value)
+        }
+      ),
+      captionPreview ? /* @__PURE__ */ jsxs4("div", { className: "gallery-edit-form__hint", children: [
+        "Preview: ",
+        captionPreview
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "gallery-edit-form__row", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "gallery-edit-form__section", children: [
+        /* @__PURE__ */ jsx4("div", { className: "gallery-edit-form__section-title", children: t2(i18n, "form.category") }),
+        /* @__PURE__ */ jsx4(
+          "select",
+          {
+            name: "categoryId",
+            className: "gallery-edit-form__input",
+            value: form.categoryId,
+            onChange: (e) => updateField("categoryId", e.target.value),
+            children: categories.map((c) => /* @__PURE__ */ jsx4("option", { value: c.id, children: c.labelKo }, c.id))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "gallery-edit-form__section", children: [
+        /* @__PURE__ */ jsx4("div", { className: "gallery-edit-form__section-title", children: t2(i18n, "form.sortOrder") }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "number",
+            name: "sortOrder",
+            className: "gallery-edit-form__input",
+            value: form.sortOrder,
+            min: 0,
+            onChange: (e) => {
+              const n = parseInt(e.target.value, 10);
+              updateField("sortOrder", Number.isNaN(n) ? 0 : n);
+            }
+          }
+        ),
+        isMultiActive ? /* @__PURE__ */ jsxs4("div", { className: "gallery-edit-form__hint", children: [
+          form.sortOrder,
+          " ~ ",
+          form.sortOrder + multiImages.length - 1
+        ] }) : null
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/GalleryHomePreview.tsx
+import { useCallback as useCallback2, useRef as useRef3, useState as useState2 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var DEFAULT_TEXT4 = {
+  "preview.title": "Home preview",
+  "preview.dragHint": "Drag tiles to reorder",
+  "preview.emptyState": "Select images to feature on the home page"
+};
+function t3(i18n, key) {
+  return i18n?.[key] ?? DEFAULT_TEXT4[key] ?? key;
+}
+function GalleryHomePreview(props) {
+  const { items, maxCount, onReorder, onToggleFeatured, i18n, className } = props;
+  const [dragIndex, setDragIndex] = useState2(null);
+  const [dragOverIndex, setDragOverIndex] = useState2(null);
+  const reorderedRef = useRef3(null);
+  const handleDragStart = useCallback2(
+    (e, index) => {
+      setDragIndex(index);
+      try {
+        e.dataTransfer.effectAllowed = "move";
+      } catch {
+      }
+    },
+    []
+  );
+  const handleDragOver = useCallback2(
+    (e, index) => {
+      e.preventDefault();
+      try {
+        e.dataTransfer.dropEffect = "move";
+      } catch {
+      }
+      setDragOverIndex(index);
+    },
+    []
+  );
+  const handleDrop = useCallback2(
+    (e, dropIndex) => {
+      e.preventDefault();
+      if (dragIndex === null || dragIndex === dropIndex) {
+        reorderedRef.current = null;
+        return;
+      }
+      const reordered = [...items];
+      const tmp = reordered[dragIndex];
+      reordered[dragIndex] = reordered[dropIndex];
+      reordered[dropIndex] = tmp;
+      reorderedRef.current = reordered.map((it) => it.id);
+    },
+    [dragIndex, items]
+  );
+  const handleDragEnd = useCallback2(() => {
+    if (reorderedRef.current) {
+      void onReorder(reorderedRef.current);
+    }
+    reorderedRef.current = null;
+    setDragIndex(null);
+    setDragOverIndex(null);
+  }, [onReorder]);
+  const handleStarClick = useCallback2(
+    (item) => {
+      void onToggleFeatured(item.id, !item.featured);
+    },
+    [onToggleFeatured]
+  );
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxs5("div", { className: cn("gallery-home-preview", "gallery-home-preview--empty", className), children: [
+      /* @__PURE__ */ jsx5("div", { className: "gallery-home-preview__header", children: /* @__PURE__ */ jsx5("h3", { className: "gallery-home-preview__title", children: t3(i18n, "preview.title") }) }),
+      /* @__PURE__ */ jsx5("div", { className: "gallery-home-preview__empty", children: t3(i18n, "preview.emptyState") })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: cn("gallery-home-preview", className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "gallery-home-preview__header", children: [
+      /* @__PURE__ */ jsx5("h3", { className: "gallery-home-preview__title", children: t3(i18n, "preview.title") }),
+      /* @__PURE__ */ jsxs5("span", { className: "gallery-home-preview__count", children: [
+        items.length,
+        "/",
+        maxCount
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "gallery-home-preview__hint", children: t3(i18n, "preview.dragHint") }),
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "gallery-home-preview__mosaic",
+        "data-count": maxCount,
+        children: Array.from({ length: maxCount }).map((_, slotIndex) => {
+          const item = items[slotIndex];
+          if (!item) {
+            return /* @__PURE__ */ jsx5(
+              "div",
+              {
+                className: "gallery-home-preview__tile gallery-home-preview__tile--empty",
+                children: /* @__PURE__ */ jsx5("span", { className: "gallery-home-preview__order", children: slotIndex + 1 })
+              },
+              `empty-${slotIndex}`
+            );
+          }
+          return /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              className: cn(
+                "gallery-home-preview__tile",
+                dragOverIndex === slotIndex && "gallery-home-preview__tile--drag-over",
+                dragIndex === slotIndex && "gallery-home-preview__tile--dragging"
+              ),
+              draggable: true,
+              onDragStart: (e) => handleDragStart(e, slotIndex),
+              onDragOver: (e) => handleDragOver(e, slotIndex),
+              onDrop: (e) => handleDrop(e, slotIndex),
+              onDragEnd: handleDragEnd,
+              children: [
+                /* @__PURE__ */ jsx5(
+                  "img",
+                  {
+                    src: item.imageUrl,
+                    alt: item.caption ?? "",
+                    className: "gallery-home-preview__img"
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn(
+                      "gallery-home-preview__star",
+                      item.featured && "gallery-home-preview__star--active"
+                    ),
+                    onClick: () => handleStarClick(item),
+                    "aria-label": item.featured ? "unfeature" : "feature",
+                    "aria-pressed": item.featured,
+                    children: item.featured ? "\u2605" : "\u2606"
+                  }
+                ),
+                /* @__PURE__ */ jsx5("span", { className: "gallery-home-preview__order", children: slotIndex + 1 }),
+                item.caption ? /* @__PURE__ */ jsx5("div", { className: "gallery-home-preview__caption", children: item.caption }) : null
+              ]
+            },
+            item.id
+          );
+        })
+      }
+    )
+  ] });
+}
+
+// src/components/GalleryAdminManager.tsx
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef as useRef4,
+  useState as useState3
+} from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+async function clientFetch(url, init) {
+  return fetch(url, {
+    credentials: "include",
+    headers: init?.body ? { "Content-Type": "application/json", ...init?.headers } : init?.headers,
+    ...init
+  });
+}
+async function jsonOrNull(res) {
+  try {
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+var DEFAULT_TEXT5 = {
+  "admin.title": "Gallery",
+  "admin.newButton": "+ New",
+  "admin.searchPlaceholder": "Search...",
+  "admin.emptyState": "Select an item to edit"
+};
+function t4(i18n, key) {
+  return i18n?.[key] ?? DEFAULT_TEXT5[key] ?? key;
+}
+function GalleryAdminManager(props) {
+  const { initialMode, initialSelectedId, className } = props;
+  const config = getGalleryConfig();
+  const i18n = config.i18n ?? {};
+  const ui = config.ui;
+  const maxFeatured = config.limits.maxFeatured;
+  const mosaicCount = config.limits.mosaicCount;
+  const [items, setItems] = useState3([]);
+  const [categories, setCategories] = useState3([]);
+  const [selectedId, setSelectedId] = useState3(initialSelectedId ?? null);
+  const [mode, setMode] = useState3(
+    initialMode ?? (initialSelectedId ? "edit" : "list")
+  );
+  const [saving, setSaving] = useState3(false);
+  const [search, setSearch] = useState3("");
+  const [refreshKey, setRefreshKey] = useState3(0);
+  const mountedRef = useRef4(true);
+  useEffect2(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect2(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await clientFetch("/api/admin/galleries");
+        const json = await jsonOrNull(res);
+        if (!cancelled && mountedRef.current) {
+          const data = json?.data ?? json ?? [];
+          setItems(Array.isArray(data) ? data : []);
+        }
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [refreshKey]);
+  useEffect2(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await clientFetch("/api/admin/gallery-categories");
+        const json = await jsonOrNull(res);
+        if (!cancelled && mountedRef.current) {
+          const data = json?.data ?? json ?? [];
+          setCategories(Array.isArray(data) ? data : []);
+        }
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const selectedItem = useMemo2(() => {
+    if (!selectedId) return null;
+    return items.find((i) => i.id === selectedId) ?? null;
+  }, [selectedId, items]);
+  const filteredItems = useMemo2(() => {
+    if (!search.trim()) return items;
+    const q = search.trim().toLowerCase();
+    return items.filter((g) => (g.caption ?? "").toLowerCase().includes(q));
+  }, [items, search]);
+  const featuredCount = useMemo2(
+    () => items.filter((i) => i.featured && i.published).length,
+    [items]
+  );
+  const previewItems = useMemo2(
+    () => items.filter((i) => i.featured && i.published).sort((a, b) => a.sortOrder - b.sortOrder),
+    [items]
+  );
+  const refresh = useCallback3(() => setRefreshKey((k) => k + 1), []);
+  const handleSelect = useCallback3((id) => {
+    setSelectedId(id);
+    setMode("edit");
+  }, []);
+  const handleNewClick = useCallback3(() => {
+    setSelectedId(null);
+    setMode("new");
+  }, []);
+  const handleCancel = useCallback3(() => {
+    setSelectedId(null);
+    setMode("list");
+  }, []);
+  const handleSubmit = useCallback3(
+    async (data) => {
+      setSaving(true);
+      try {
+        if (mode === "new") {
+          await clientFetch("/api/admin/galleries", {
+            method: "POST",
+            body: JSON.stringify(data)
+          });
+        } else if (selectedId) {
+          await clientFetch(`/api/admin/galleries/${selectedId}`, {
+            method: "PUT",
+            body: JSON.stringify(data)
+          });
+        }
+        if (mountedRef.current) {
+          refresh();
+          setMode("list");
+          setSelectedId(null);
+        }
+      } finally {
+        if (mountedRef.current) setSaving(false);
+      }
+    },
+    [mode, selectedId, refresh]
+  );
+  const handleSubmitMany = useCallback3(
+    async (batch) => {
+      setSaving(true);
+      try {
+        await clientFetch("/api/admin/galleries/bulk", {
+          method: "POST",
+          body: JSON.stringify({ items: batch })
+        });
+        if (mountedRef.current) {
+          refresh();
+          setMode("list");
+        }
+      } finally {
+        if (mountedRef.current) setSaving(false);
+      }
+    },
+    [refresh]
+  );
+  const handleDelete = useCallback3(async () => {
+    if (!selectedId) return;
+    if (typeof window !== "undefined" && !window.confirm("Delete this item?")) return;
+    await clientFetch(`/api/admin/galleries/${selectedId}`, { method: "DELETE" });
+    if (mountedRef.current) {
+      setSelectedId(null);
+      setMode("list");
+      refresh();
+    }
+  }, [selectedId, refresh]);
+  const handleToggleFeatured = useCallback3(
+    async (id, next) => {
+      if (next && featuredCount >= maxFeatured) {
+        if (typeof window !== "undefined") {
+          window.alert(t4(i18n, "admin.featuredOverLimit"));
+        }
+        return;
+      }
+      await clientFetch(`/api/admin/galleries/${id}`, {
+        method: "PUT",
+        body: JSON.stringify({ featured: next })
+      });
+      if (mountedRef.current) refresh();
+    },
+    [featuredCount, maxFeatured, i18n, refresh]
+  );
+  const handleReorder = useCallback3(
+    async (orderedIds) => {
+      await Promise.all(
+        orderedIds.map(
+          (id, index) => clientFetch(`/api/admin/galleries/${id}`, {
+            method: "PUT",
+            body: JSON.stringify({ sortOrder: index + 1 })
+          })
+        )
+      );
+      if (mountedRef.current) refresh();
+    },
+    [refresh]
+  );
+  const isMultipleMode = mode === "new";
+  const editForm = mode === "list" ? null : /* @__PURE__ */ jsx6(
+    GalleryEditForm,
+    {
+      value: mode === "edit" ? selectedItem : null,
+      categories,
+      saving,
+      multipleMode: isMultipleMode,
+      canToggleFeatured: featuredCount < maxFeatured || (selectedItem?.featured ?? false),
+      i18n,
+      onSubmit: handleSubmit,
+      onSubmitMany: handleSubmitMany,
+      onCancel: handleCancel,
+      onDelete: mode === "edit" ? handleDelete : void 0
+    },
+    mode === "new" ? "new" : selectedId ?? "edit"
+  );
+  const filterControls = /* @__PURE__ */ jsxs6("div", { className: "gallery-manager__filter-controls", children: [
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        type: "search",
+        className: "gallery-manager__search",
+        placeholder: t4(i18n, "admin.searchPlaceholder"),
+        value: search,
+        onChange: (e) => setSearch(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx6("span", { className: "gallery-manager__count", children: filteredItems.length })
+  ] });
+  const toolbar = /* @__PURE__ */ jsxs6("div", { className: "gallery-manager__toolbar-row", children: [
+    /* @__PURE__ */ jsx6("h1", { className: "gallery-manager__title", children: t4(i18n, "admin.title") }),
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        className: "gallery-manager__new-btn",
+        onClick: handleNewClick,
+        children: t4(i18n, "admin.newButton")
+      }
+    )
+  ] });
+  const listRoot = /* @__PURE__ */ jsx6("ul", { className: "gallery-manager__list-ul", children: filteredItems.map((item) => /* @__PURE__ */ jsxs6(
+    "li",
+    {
+      className: cn("gallery-list-item", selectedId === item.id && "gallery-list-item--active"),
+      onClick: () => handleSelect(item.id),
+      children: [
+        /* @__PURE__ */ jsx6("img", { src: item.imageUrl, alt: "", className: "gallery-list-item__thumb" }),
+        /* @__PURE__ */ jsxs6("div", { className: "gallery-list-item__body", children: [
+          /* @__PURE__ */ jsx6("div", { className: "gallery-list-item__caption", children: item.caption || "(no caption)" }),
+          /* @__PURE__ */ jsxs6("div", { className: "gallery-list-item__meta", children: [
+            item.featured ? "\u2605 " : "",
+            item.published ? "\uACF5\uAC1C" : "\uBE44\uACF5\uAC1C",
+            " \xB7 \uC21C\uC11C ",
+            item.sortOrder
+          ] })
+        ] })
+      ]
+    },
+    item.id
+  )) });
+  const homePreview = /* @__PURE__ */ jsx6(
+    GalleryHomePreview,
+    {
+      items: previewItems,
+      maxCount: mosaicCount,
+      onReorder: handleReorder,
+      onToggleFeatured: handleToggleFeatured,
+      i18n
+    }
+  );
+  return /* @__PURE__ */ jsx6(
+    GalleryManagerLayout,
+    {
+      className,
+      listRoot,
+      filterControls,
+      toolbar,
+      editForm,
+      homePreview,
+      i18n,
+      ui
+    }
+  );
+}
+
+// src/components/CategoryAdminManager.tsx
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect3,
+  useRef as useRef5,
+  useState as useState4
+} from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var DEFAULT_TEXT6 = {
+  "category.title": "Gallery categories",
+  "category.newButton": "+ New category",
+  "category.slug": "Slug (uppercase)",
+  "category.labelKo": "Label (Ko)",
+  "category.labelEn": "Label (En)",
+  "category.deleteConfirmInUse": "This category has galleries \u2014 remove or move them first"
+};
+function t5(i18n, key) {
+  return i18n?.[key] ?? DEFAULT_TEXT6[key] ?? key;
+}
+var EMPTY_FORM = {
+  id: null,
+  slug: "",
+  labelKo: "",
+  labelEn: "",
+  sortOrder: 0,
+  isActive: true
+};
+async function clientFetch2(url, init) {
+  return fetch(url, {
+    credentials: "include",
+    headers: init?.body ? { "Content-Type": "application/json", ...init?.headers } : init?.headers,
+    ...init
+  });
+}
+async function jsonOrNull2(res) {
+  try {
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+function CategoryAdminManager(props) {
+  const { className } = props;
+  const config = getGalleryConfig();
+  const i18n = config.i18n ?? {};
+  const [items, setItems] = useState4([]);
+  const [form, setForm] = useState4(EMPTY_FORM);
+  const [error, setError] = useState4(null);
+  const [refreshKey, setRefreshKey] = useState4(0);
+  const [saving, setSaving] = useState4(false);
+  const mountedRef = useRef5(true);
+  useEffect3(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect3(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await clientFetch2("/api/admin/gallery-categories");
+        const json = await jsonOrNull2(res);
+        if (!cancelled && mountedRef.current) {
+          const data = json?.data ?? json ?? [];
+          setItems(Array.isArray(data) ? data : []);
+        }
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [refreshKey]);
+  const refresh = useCallback4(() => setRefreshKey((k) => k + 1), []);
+  const handleEdit = useCallback4((cat) => {
+    setError(null);
+    setForm({
+      id: cat.id,
+      slug: cat.slug,
+      labelKo: cat.labelKo,
+      labelEn: cat.labelEn ?? "",
+      sortOrder: cat.sortOrder,
+      isActive: cat.isActive
+    });
+  }, []);
+  const handleNew = useCallback4(() => {
+    setError(null);
+    setForm(EMPTY_FORM);
+  }, []);
+  const handleSave = useCallback4(async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      const body = JSON.stringify({
+        slug: form.slug,
+        labelKo: form.labelKo,
+        labelEn: form.labelEn || void 0,
+        sortOrder: form.sortOrder,
+        isActive: form.isActive
+      });
+      const url = form.id ? `/api/admin/gallery-categories/${form.id}` : "/api/admin/gallery-categories";
+      const method = form.id ? "PUT" : "POST";
+      const res = await clientFetch2(url, { method, body });
+      if (!res.ok) {
+        const json = await jsonOrNull2(res);
+        setError(json?.error?.message ?? `Save failed (${res.status})`);
+        return;
+      }
+      if (mountedRef.current) {
+        setForm(EMPTY_FORM);
+        refresh();
+      }
+    } finally {
+      if (mountedRef.current) setSaving(false);
+    }
+  }, [form, refresh]);
+  const handleDelete = useCallback4(
+    async (cat) => {
+      if (typeof window !== "undefined" && !window.confirm(`Delete "${cat.labelKo}"?`)) return;
+      setError(null);
+      const res = await clientFetch2(`/api/admin/gallery-categories/${cat.id}`, {
+        method: "DELETE"
+      });
+      if (res.status === 409) {
+        setError(t5(i18n, "category.deleteConfirmInUse"));
+        return;
+      }
+      if (!res.ok) {
+        const json = await jsonOrNull2(res);
+        setError(json?.error?.message ?? `Delete failed (${res.status})`);
+        return;
+      }
+      if (mountedRef.current) refresh();
+    },
+    [i18n, refresh]
+  );
+  return /* @__PURE__ */ jsxs7("div", { className: cn("gallery-category-admin", className), children: [
+    /* @__PURE__ */ jsxs7("header", { className: "gallery-category-admin__header", children: [
+      /* @__PURE__ */ jsx7("h2", { className: "gallery-category-admin__title", children: t5(i18n, "category.title") }),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: "gallery-category-admin__new",
+          onClick: handleNew,
+          children: t5(i18n, "category.newButton")
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ jsx7("div", { className: "gallery-category-admin__error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx7("ul", { className: "gallery-category-admin__list", children: items.map((c) => /* @__PURE__ */ jsxs7("li", { className: "gallery-category-admin__item", children: [
+      /* @__PURE__ */ jsxs7(
+        "button",
+        {
+          type: "button",
+          className: "gallery-category-admin__item-row",
+          onClick: () => handleEdit(c),
+          children: [
+            /* @__PURE__ */ jsx7("span", { className: "gallery-category-admin__slug", children: c.slug }),
+            /* @__PURE__ */ jsx7("span", { className: "gallery-category-admin__label", children: c.labelKo }),
+            /* @__PURE__ */ jsxs7("span", { className: "gallery-category-admin__order", children: [
+              "#",
+              c.sortOrder
+            ] }),
+            /* @__PURE__ */ jsx7("span", { className: "gallery-category-admin__active", children: c.isActive ? "\u2713" : "\u2717" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: "gallery-category-admin__delete",
+          onClick: () => void handleDelete(c),
+          "aria-label": "delete",
+          children: "\xD7"
+        }
+      )
+    ] }, c.id)) }),
+    /* @__PURE__ */ jsxs7("div", { className: "gallery-category-admin__form", children: [
+      /* @__PURE__ */ jsx7("div", { className: "gallery-category-admin__form-title", children: form.id ? "Edit category" : "New category" }),
+      /* @__PURE__ */ jsxs7("div", { className: "gallery-category-admin__field", children: [
+        /* @__PURE__ */ jsx7("label", { className: "gallery-category-admin__field-label", children: t5(i18n, "category.slug") }),
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            name: "slug",
+            className: "gallery-category-admin__input",
+            value: form.slug,
+            onChange: (e) => setForm((f) => ({ ...f, slug: e.target.value.toUpperCase() })),
+            placeholder: "UPPER_SNAKE"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "gallery-category-admin__field", children: [
+        /* @__PURE__ */ jsx7("label", { className: "gallery-category-admin__field-label", children: t5(i18n, "category.labelKo") }),
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            name: "labelKo",
+            className: "gallery-category-admin__input",
+            value: form.labelKo,
+            onChange: (e) => setForm((f) => ({ ...f, labelKo: e.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "gallery-category-admin__field", children: [
+        /* @__PURE__ */ jsx7("label", { className: "gallery-category-admin__field-label", children: t5(i18n, "category.labelEn") }),
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            name: "labelEn",
+            className: "gallery-category-admin__input",
+            value: form.labelEn,
+            onChange: (e) => setForm((f) => ({ ...f, labelEn: e.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "gallery-category-admin__field gallery-category-admin__field--row", children: [
+        /* @__PURE__ */ jsx7("label", { className: "gallery-category-admin__field-label", children: "Sort order" }),
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            type: "number",
+            name: "sortOrder",
+            className: "gallery-category-admin__input",
+            value: form.sortOrder,
+            min: 0,
+            onChange: (e) => {
+              const n = parseInt(e.target.value, 10);
+              setForm((f) => ({ ...f, sortOrder: Number.isNaN(n) ? 0 : n }));
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          ToggleSwitch,
+          {
+            checked: form.isActive,
+            onChange: (v) => setForm((f) => ({ ...f, isActive: v })),
+            label: "Active",
+            size: "sm"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "gallery-category-admin__form-actions", children: [
+        form.id ? /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "gallery-category-admin__cancel",
+            onClick: () => setForm(EMPTY_FORM),
+            children: "Cancel"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "gallery-category-admin__save",
+            onClick: () => void handleSave(),
+            disabled: saving || !form.slug || !form.labelKo,
+            children: saving ? "Saving..." : form.id ? "Update" : "Create"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  CategoryAdminManager,
+  GalleryAdminManager,
+  GalleryEditForm,
+  GalleryHomePreview,
+  GalleryManagerLayout,
+  ImageDropZone,
+  ToggleSwitch
+};
+//# sourceMappingURL=index.mjs.map