@ampless/admin 0.2.0-alpha.10 → 0.2.0-alpha.11

package/dist/chunk-XXJDT6FF.js

@@ -0,0 +1,335 @@
+'use client';
+import {
+  useT
+} from "./chunk-OFHKZNZS.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
+};

package/dist/chunk-XZQRPXKN.js

@@ -0,0 +1,41 @@
+'use client';
+import {
+  PostForm
+} from "./chunk-7IJDOT2K.js";
+import {
+  readAdminSiteIdFromCookie
+} from "./chunk-TZWSXAHD.js";
+import {
+  useT
+} from "./chunk-OFHKZNZS.js";
+
+// src/components/edit-post-view.tsx
+import { useEffect, useState, use } from "react";
+import { notFound } from "next/navigation";
+import { getPostById } from "ampless";
+import { jsx, jsxs } from "react/jsx-runtime";
+function EditPostPage({ params }) {
+  const t = useT();
+  const { postId } = use(params);
+  const [post, setPost] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [missing, setMissing] = useState(false);
+  useEffect(() => {
+    const siteId = readAdminSiteIdFromCookie();
+    getPostById(postId, { siteId }).then((p) => {
+      if (!p) setMissing(true);
+      else setPost(p);
+    }).finally(() => setLoading(false));
+  }, [postId]);
+  if (loading)
+    return /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl p-4 md:p-8", children: t("common.loading") });
+  if (missing) notFound();
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl p-4 md:p-8", children: [
+    /* @__PURE__ */ jsx("h1", { className: "mb-6 text-2xl font-bold md:mb-8 md:text-3xl", children: t("posts.form.editTitle") }),
+    post && /* @__PURE__ */ jsx(PostForm, { post })
+  ] });
+}
+
+export {
+  EditPostPage
+};

package/dist/components/admin-dashboard.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Admin home / dashboard. Lists post counts. Marked client-side because
+ * it reads from the AppSync client directly (no server-rendered query
+ * yet — listed posts come from Amplify SDK at mount time).
+ */
+declare function AdminDashboard(): react_jsx_runtime.JSX.Element;
+
+export { AdminDashboard };

package/dist/components/admin-dashboard.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  AdminDashboard
+} from "../chunk-4YEBIBFG.js";
+import "../chunk-OFHKZNZS.js";
+import "../chunk-OPQ3SAZJ.js";
+export {
+  AdminDashboard
+};

package/dist/components/edit-post-view.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function EditPostPage({ params }: {
+    params: Promise<{
+        postId: string;
+    }>;
+}): react_jsx_runtime.JSX.Element;
+
+export { EditPostPage };

package/dist/components/edit-post-view.js

@@ -0,0 +1,14 @@
+"use client";
+import {
+  EditPostPage
+} from "../chunk-XZQRPXKN.js";
+import "../chunk-7IJDOT2K.js";
+import "../chunk-TZWSXAHD.js";
+import "../chunk-7IR4F7GA.js";
+import "../chunk-XXJDT6FF.js";
+import "../chunk-2ITWLRYF.js";
+import "../chunk-OFHKZNZS.js";
+import "../chunk-OPQ3SAZJ.js";
+export {
+  EditPostPage
+};

package/dist/components/index.d.ts

@@ -2,7 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { L as Locale, D as Dictionary } from '../i18n-DzXXcIQQ.js';
 import { Config, Post, ThemeManifest, LocalizedString, MediaProcessingDefaults } from 'ampless';
 import { AmplessOutputs } from '@ampless/runtime';
-export { A as AdminDashboard, E as EditPostPage, L as LoginPage, M as MediaPage, N as NewPostPage, P as PostsList } from '../login-view-BKrSZLJu.js';
 import { ProcessOptions } from 'ampless/media';
 export { invalidateSiteSettingsCache } from '../lib/theme-actions.js';
 

package/dist/components/index.js

@@ -1,53 +1,51 @@
 'use client';
 import {
-  AdminDashboard,
   AdminProviders,
-  EditPostPage,
-  ImageUploadDialog,
-  LoginPage,
-  MediaPage,
-  MediaPicker,
-  MediaUploader,
-  NewPostPage,
-  PostForm,
-  PostsList,
   Sidebar,
   SiteSelector,
   SiteSettingsForm,
-  ThemeSettingsForm,
-  readAdminSiteIdFromCookie,
+  ThemeSettingsForm
+} from "../chunk-XHWECTED.js";
+import {
+  invalidateSiteSettingsCache
+} from "../chunk-VXEVLHGL.js";
+import {
+  MediaUploader
+} from "../chunk-GDQC5X46.js";
+import {
+  MediaPicker,
+  PostForm,
   sanitizeName,
-  setAdminCmsConfig,
   uploadProcessedImage
-} from "../chunk-PAL62MXF.js";
+} from "../chunk-7IJDOT2K.js";
+import {
+  readAdminSiteIdFromCookie,
+  setAdminCmsConfig
+} from "../chunk-TZWSXAHD.js";
+import {
+  ADMIN_SITE_COOKIE
+} from "../chunk-7IR4F7GA.js";
+import {
+  ImageUploadDialog
+} from "../chunk-XXJDT6FF.js";
 import {
-  ADMIN_SITE_COOKIE,
   publicMediaUrl,
   setAdminMediaContext
-} from "../chunk-QMVFRT62.js";
+} from "../chunk-2ITWLRYF.js";
 import {
   I18nProvider,
   useLocale,
   useT
 } from "../chunk-OFHKZNZS.js";
 import "../chunk-OPQ3SAZJ.js";
-import {
-  invalidateSiteSettingsCache
-} from "../chunk-VXEVLHGL.js";
 export {
   ADMIN_SITE_COOKIE,
-  AdminDashboard,
   AdminProviders,
-  EditPostPage,
   I18nProvider,
   ImageUploadDialog,
-  LoginPage,
-  MediaPage,
   MediaPicker,
   MediaUploader,
-  NewPostPage,
   PostForm,
-  PostsList,
   Sidebar,
   SiteSelector,
   SiteSettingsForm,

package/dist/components/login-view.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function LoginPage(): react_jsx_runtime.JSX.Element;
+
+export { LoginPage };

package/dist/components/login-view.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  LoginPage
+} from "../chunk-5OIPGVGG.js";
+import "../chunk-OFHKZNZS.js";
+import "../chunk-OPQ3SAZJ.js";
+export {
+  LoginPage
+};

package/dist/components/media-view.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function MediaPage(): react_jsx_runtime.JSX.Element;
+
+export { MediaPage };

package/dist/components/media-view.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  MediaPage
+} from "../chunk-BYLCQYEQ.js";
+import "../chunk-GDQC5X46.js";
+import "../chunk-XXJDT6FF.js";
+import "../chunk-2ITWLRYF.js";
+import "../chunk-OFHKZNZS.js";
+import "../chunk-OPQ3SAZJ.js";
+export {
+  MediaPage
+};

package/dist/components/new-post-view.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function NewPostPage(): react_jsx_runtime.JSX.Element;
+
+export { NewPostPage };

package/dist/components/new-post-view.js

@@ -0,0 +1,14 @@
+"use client";
+import {
+  NewPostPage
+} from "../chunk-QVUTNQZH.js";
+import "../chunk-7IJDOT2K.js";
+import "../chunk-TZWSXAHD.js";
+import "../chunk-7IR4F7GA.js";
+import "../chunk-XXJDT6FF.js";
+import "../chunk-2ITWLRYF.js";
+import "../chunk-OFHKZNZS.js";
+import "../chunk-OPQ3SAZJ.js";
+export {
+  NewPostPage
+};

package/dist/components/posts-list-view.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function PostsList(): react_jsx_runtime.JSX.Element;
+
+export { PostsList };

package/dist/components/posts-list-view.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  PostsList
+} from "../chunk-BFZODSUT.js";
+import "../chunk-TZWSXAHD.js";
+import "../chunk-7IR4F7GA.js";
+import "../chunk-OFHKZNZS.js";
+import "../chunk-OPQ3SAZJ.js";
+export {
+  PostsList
+};

package/dist/index.js

@@ -1,7 +1,9 @@
 import {
-  ADMIN_SITE_COOKIE,
+  ADMIN_SITE_COOKIE
+} from "./chunk-7IR4F7GA.js";
+import {
   createMedia
-} from "./chunk-QMVFRT62.js";
+} from "./chunk-2ITWLRYF.js";
 import {
   getDictionary,
   resolveLocale,