@ampless/admin 0.2.0-alpha.8 → 1.0.0-alpha.27

package/dist/chunk-CTGFMK2J.js

@@ -0,0 +1,335 @@
+'use client';
+import {
+  useT
+} from "./chunk-Q66BLMNJ.js";
+
+// src/components/image-upload-dialog.tsx
+import { useEffect, useRef, useState } from "react";
+import ReactCrop, { centerCrop, makeAspectCrop } from "react-image-crop";
+import "react-image-crop/dist/ReactCrop.css";
+import { shouldSkipProcessing } from "ampless/media";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Button,
+  Input,
+  Label
+} from "@ampless/runtime/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ASPECTS = {
+  free: void 0,
+  "1:1": 1,
+  "4:3": 4 / 3,
+  "16:9": 16 / 9,
+  "3:2": 3 / 2
+};
+var ASPECT_CHOICES = ["free", "1:1", "4:3", "16:9", "3:2"];
+var FORMAT_CHOICES = ["auto", "webp", "jpeg"];
+var MAX_DIMENSION_PRESETS = [640, 1024, 1600, 2400, 4e3];
+var MIN_DIMENSION = 100;
+var MAX_DIMENSION_CEILING = 8e3;
+function clampMaxDimension(value, fallback) {
+  if (!Number.isFinite(value) || value <= 0) return fallback;
+  return Math.min(MAX_DIMENSION_CEILING, Math.max(MIN_DIMENSION, Math.round(value)));
+}
+function clampQuality(value) {
+  if (!Number.isFinite(value)) return 0.85;
+  return Math.min(1, Math.max(0, value));
+}
+function resolveFormat(choice, inputMime, losslessForPng) {
+  if (choice === "auto") {
+    return {
+      format: "webp",
+      lossless: losslessForPng && inputMime === "image/png"
+    };
+  }
+  return { format: choice, lossless: false };
+}
+function buildInitialCrop(naturalWidth, naturalHeight, aspect) {
+  if (aspect) {
+    return centerCrop(
+      makeAspectCrop({ unit: "%", width: 100 }, aspect, naturalWidth, naturalHeight),
+      naturalWidth,
+      naturalHeight
+    );
+  }
+  return { unit: "%", x: 0, y: 0, width: 100, height: 100 };
+}
+function ImageUploadDialog({
+  file,
+  remaining,
+  busy = false,
+  defaults,
+  onConfirm,
+  onSkip,
+  onCancel
+}) {
+  const t = useT();
+  const defaultMaxDimension = defaults?.maxDimension ?? 2400;
+  const defaultQuality = defaults?.quality ?? 0.85;
+  const losslessForPng = defaults?.losslessForPng ?? true;
+  const [original, setOriginal] = useState(false);
+  const [aspect, setAspect] = useState("free");
+  const [crop, setCrop] = useState(void 0);
+  const [percentCrop, setPercentCrop] = useState(null);
+  const [naturalSize, setNaturalSize] = useState(null);
+  const [formatChoice, setFormatChoice] = useState("auto");
+  const [losslessOverride, setLosslessOverride] = useState(null);
+  const [quality, setQuality] = useState(defaultQuality);
+  const [maxDimension, setMaxDimension] = useState(defaultMaxDimension);
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const imgRef = useRef(null);
+  useEffect(() => {
+    setOriginal(false);
+    setAspect("free");
+    setCrop(void 0);
+    setPercentCrop(null);
+    setNaturalSize(null);
+    setFormatChoice("auto");
+    setLosslessOverride(null);
+    setQuality(defaultQuality);
+    setMaxDimension(defaultMaxDimension);
+  }, [file, defaultQuality, defaultMaxDimension]);
+  useEffect(() => {
+    if (!naturalSize) return;
+    const next = buildInitialCrop(naturalSize.width, naturalSize.height, ASPECTS[aspect]);
+    setCrop(next);
+    setPercentCrop(next);
+  }, [aspect, naturalSize]);
+  useEffect(() => {
+    if (!file) {
+      setPreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+  if (!file) return null;
+  const isImage = file.type.startsWith("image/");
+  const passthrough = !isImage || shouldSkipProcessing(file.type);
+  const showCropper = !passthrough && !original;
+  const { format, lossless: autoLossless } = resolveFormat(formatChoice, file.type, losslessForPng);
+  const lossless = losslessOverride ?? autoLossless;
+  const showLosslessToggle = !original && !passthrough && format === "webp";
+  const showQualitySlider = !original && !passthrough && (format === "jpeg" || format === "webp" && !lossless);
+  function handleImageLoad(e) {
+    const { naturalWidth, naturalHeight } = e.currentTarget;
+    setNaturalSize({ width: naturalWidth, height: naturalHeight });
+    const initial = buildInitialCrop(naturalWidth, naturalHeight, ASPECTS[aspect]);
+    setCrop(initial);
+    setPercentCrop(initial);
+  }
+  function handleConfirm() {
+    if (!file || busy) return;
+    if (original || passthrough) {
+      onConfirm(file, { original: true });
+      return;
+    }
+    let cropArea = void 0;
+    if (percentCrop && naturalSize) {
+      const x = Math.round(percentCrop.x / 100 * naturalSize.width);
+      const y = Math.round(percentCrop.y / 100 * naturalSize.height);
+      const width = Math.round(percentCrop.width / 100 * naturalSize.width);
+      const height = Math.round(percentCrop.height / 100 * naturalSize.height);
+      if (width > 0 && height > 0 && (x !== 0 || y !== 0 || width !== naturalSize.width || height !== naturalSize.height)) {
+        cropArea = { x, y, width, height };
+      }
+    }
+    onConfirm(file, {
+      crop: cropArea,
+      maxDimension: clampMaxDimension(maxDimension, defaultMaxDimension),
+      format,
+      quality: clampQuality(quality),
+      lossless: format === "webp" ? lossless : false
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: true,
+      onOpenChange: (open) => {
+        if (open) return;
+        onCancel();
+      },
+      children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] max-w-4xl overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: "truncate", children: file.name }),
+          /* @__PURE__ */ jsxs(DialogDescription, { children: [
+            remaining > 1 ? t("media.dialog.remaining", { count: remaining }) : `${formatBytes(file.size)} \xB7 ${file.type || "unknown"}`,
+            busy && t("media.dialog.uploading")
+          ] })
+        ] }),
+        previewUrl && showCropper && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-md bg-black/90 p-2", children: /* @__PURE__ */ jsx(
+          ReactCrop,
+          {
+            crop,
+            aspect: ASPECTS[aspect],
+            minWidth: 20,
+            minHeight: 20,
+            onChange: (_pixel, percent) => {
+              setCrop(percent);
+              setPercentCrop(percent);
+            },
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                ref: imgRef,
+                src: previewUrl,
+                alt: "preview",
+                className: "block max-h-[60vh] max-w-full",
+                onLoad: handleImageLoad
+              }
+            )
+          }
+        ) }),
+        previewUrl && !showCropper && isImage && /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center rounded-md bg-muted", children: /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "preview", className: "max-h-full max-w-full object-contain" }) }),
+        !isImage && // Non-image upload: skip the broken-img preview. Show the
+        // file's name / size / mime so the admin can confirm before
+        // committing the bytes to S3.
+        /* @__PURE__ */ jsxs("div", { className: "flex h-32 flex-col items-center justify-center gap-1 rounded-md bg-muted text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: file.name }),
+          /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs", children: [
+            formatBytes(file.size),
+            " \xB7 ",
+            file.type || "unknown"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: original,
+                disabled: busy,
+                onChange: (e) => setOriginal(e.target.checked)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: t("media.dialog.useOriginal") }),
+            passthrough && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("media.dialog.passthroughNote") })
+          ] }),
+          !original && !passthrough && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Label, { children: t("media.dialog.aspectRatio") }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: ASPECT_CHOICES.map((choice) => /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: aspect === choice ? "default" : "outline",
+                  size: "sm",
+                  disabled: busy,
+                  onClick: () => setAspect(choice),
+                  children: choice
+                },
+                choice
+              )) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Label, { children: t("media.dialog.outputFormat") }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: FORMAT_CHOICES.map((choice) => /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: formatChoice === choice ? "default" : "outline",
+                  size: "sm",
+                  disabled: busy,
+                  onClick: () => {
+                    setFormatChoice(choice);
+                    setLosslessOverride(null);
+                  },
+                  children: choice
+                },
+                choice
+              )) })
+            ] }),
+            showLosslessToggle && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: lossless,
+                  disabled: busy,
+                  onChange: (e) => setLosslessOverride(e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: t("media.dialog.losslessWebp") })
+            ] }),
+            showQualitySlider && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Label, { children: t("media.dialog.quality", { value: Math.round(quality * 100) }) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: 50,
+                  max: 100,
+                  step: 1,
+                  disabled: busy,
+                  value: Math.round(quality * 100),
+                  onChange: (e) => setQuality(Number(e.target.value) / 100),
+                  className: "mt-2 w-full"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "max-w-xs", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "maxDimension", children: t("media.dialog.maxDimension") }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: MAX_DIMENSION_PRESETS.map((preset) => /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: maxDimension === preset ? "default" : "outline",
+                  size: "sm",
+                  disabled: busy,
+                  onClick: () => setMaxDimension(preset),
+                  children: preset
+                },
+                preset
+              )) }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "maxDimension",
+                  type: "number",
+                  className: "mt-2",
+                  min: MIN_DIMENSION,
+                  max: MAX_DIMENSION_CEILING,
+                  disabled: busy,
+                  value: maxDimension,
+                  onChange: (e) => setMaxDimension(Number(e.target.value) || defaultMaxDimension)
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", type: "button", onClick: onCancel, children: t("media.dialog.cancelAll") }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", type: "button", disabled: busy, onClick: onSkip, children: t("media.dialog.skip") }),
+          /* @__PURE__ */ jsx(Button, { type: "button", disabled: busy, onClick: handleConfirm, children: busy ? t("media.dialog.uploadingButton") : t("media.dialog.upload") })
+        ] })
+      ] })
+    }
+  );
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+// src/lib/admin-config-client.ts
+var cmsConfig = null;
+function setAdminCmsConfigClient(config) {
+  cmsConfig = config;
+}
+function getMediaProcessingDefaults() {
+  return cmsConfig?.media?.processing;
+}
+
+export {
+  ImageUploadDialog,
+  setAdminCmsConfigClient,
+  getMediaProcessingDefaults
+};