@withpotter/components 0.13.0-next.101

package/dist/dynamic-form/fields-media.js

@@ -0,0 +1,337 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useCallback } from "react";
+import { X, Info, Edit3, GripVertical, ImagePlus, Play } from "lucide-react";
+import { uploadImage, buildCloudinaryUrl } from "@withpotter/lib/media-service";
+import { MediaLibraryPicker } from "@withpotter/components/media/media-library-picker";
+import { Button } from "@withpotter/ui-kit/button";
+import { FileInput } from "@withpotter/ui-kit";
+import { useImageUpload } from "./shared";
+function ImageField({
+  field,
+  value,
+  onChange,
+  disabled
+}) {
+  const openImageUpload = useImageUpload();
+  const imageUrl = value;
+  const url = typeof imageUrl === "object" ? imageUrl?.url : imageUrl;
+  const alt = typeof imageUrl === "object" ? imageUrl?.alt : field.label;
+  const handleOpen = useCallback(() => {
+    openImageUpload({
+      onSuccess: (result) => {
+        onChange({
+          url: result.url,
+          alt: result.alt || field.label,
+          publicId: result.publicId,
+          isCloudinary: result.isCloudinary
+        });
+      },
+      title: `Upload ${field.label}`,
+      initialUrl: url,
+      initialAlt: alt,
+      aspectRatio: 1
+    });
+  }, [openImageUpload, onChange, field.label, url, alt]);
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-3", children: url ? (
+    // Image preview as grid item
+    /* @__PURE__ */ jsxs("div", { className: "relative group aspect-square rounded-md overflow-x-auto bg-[var(--bg-muted)] border-2 border-transparent hover:border-[var(--border-strong)]", children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: url,
+          alt: alt || field.label,
+          className: "w-full h-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            onClick: handleOpen,
+            disabled,
+            title: "Edit image",
+            children: /* @__PURE__ */ jsx(Edit3, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "danger",
+            size: "icon",
+            onClick: () => onChange(void 0),
+            disabled,
+            title: "Remove image",
+            children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+          }
+        )
+      ] })
+    ] })
+  ) : (
+    // Upload button as grid item
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => !disabled && handleOpen(),
+        disabled,
+        className: `aspect-square rounded-md border-2 border-dashed flex flex-col items-center justify-center gap-1 transition-colors ${disabled ? "border-[var(--border-default)] bg-[var(--bg-subtle)] cursor-not-allowed" : "border-[var(--border-strong)] hover:border-brand-500 hover:bg-[var(--accent-secondary)]/30 cursor-pointer"}`,
+        children: [
+          /* @__PURE__ */ jsx(ImagePlus, { className: "size-6 text-[var(--text-muted)]" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)]", children: "Add image" })
+        ]
+      }
+    )
+  ) }) });
+}
+function GalleryField({
+  field,
+  value,
+  onChange,
+  disabled
+}) {
+  const openImageUpload = useImageUpload();
+  const [uploading, setUploading] = useState(null);
+  const [error, setError] = useState(null);
+  const [draggedIndex, setDraggedIndex] = useState(null);
+  const [picking, setPicking] = useState(false);
+  const fileInputRef = React.useRef(null);
+  const maxImages = field.maxImages || 3;
+  const freeLimit = 3;
+  const images = Array.isArray(value) ? value.map((img) => typeof img === "string" ? { url: img } : img) : [];
+  const canAddMore = images.length < maxImages;
+  const isOverFreeLimit = images.length >= freeLimit;
+  const handleFileSelect = async (files) => {
+    const validFiles = files.filter((file) => {
+      const isImage = file.type.startsWith("image/");
+      const isVideo = file.type.startsWith("video/");
+      if (!isImage && !isVideo) return false;
+      const maxSize = isVideo ? 100 * 1024 * 1024 : 10 * 1024 * 1024;
+      if (file.size > maxSize) return false;
+      return true;
+    });
+    if (validFiles.length === 0) {
+      setError("No valid media selected (images <= 10MB, videos <= 100MB)");
+      return;
+    }
+    const remaining = maxImages - images.length;
+    const filesToUpload = validFiles.slice(0, remaining);
+    setError(null);
+    for (let i = 0; i < filesToUpload.length; i++) {
+      setUploading(images.length + i);
+      try {
+        const result = await uploadImage(filesToUpload[i]);
+        const newImage = {
+          url: result.url,
+          type: result.resourceType === "video" ? "video" : "image",
+          alt: field.label,
+          thumbnail: result.thumbnail,
+          duration: result.duration,
+          publicId: result.publicId,
+          isCloudinary: result.isCloudinary
+        };
+        onChange([...images, newImage]);
+        images.push(newImage);
+      } catch (err) {
+        console.error("Image upload error:", err);
+        setError(`Failed to upload ${filesToUpload[i].name}`);
+      }
+    }
+    setUploading(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  const handleRemove = (index) => {
+    const newImages = [...images];
+    newImages.splice(index, 1);
+    onChange(newImages.length > 0 ? newImages : void 0);
+  };
+  const handleEdit = (index) => {
+    openImageUpload({
+      onSuccess: (result) => {
+        const newImage = {
+          url: result.url,
+          type: result.resourceType === "video" ? "video" : "image",
+          alt: result.alt || field.label,
+          thumbnail: result.thumbnail,
+          duration: result.duration,
+          publicId: result.publicId,
+          isCloudinary: result.isCloudinary
+        };
+        const newImages = [...images];
+        newImages[index] = newImage;
+        onChange(newImages);
+      },
+      title: `Edit image ${index + 1}`,
+      initialUrl: images[index]?.url,
+      initialAlt: images[index]?.alt,
+      aspectRatio: 1,
+      accept: "image/*,video/mp4,video/quicktime,video/webm"
+    });
+  };
+  const handleAddNew = () => {
+    openImageUpload({
+      onSuccess: (result) => {
+        const newImage = {
+          url: result.url,
+          type: result.resourceType === "video" ? "video" : "image",
+          alt: result.alt || field.label,
+          thumbnail: result.thumbnail,
+          duration: result.duration,
+          publicId: result.publicId,
+          isCloudinary: result.isCloudinary
+        };
+        onChange([...images, newImage]);
+      },
+      title: `Add gallery image`,
+      aspectRatio: 1,
+      accept: "image/*,video/mp4,video/quicktime,video/webm"
+    });
+  };
+  const handlePickFromLibrary = (picked) => {
+    if (picked.length === 0) return;
+    onChange([
+      ...images,
+      ...picked.map((item) => ({
+        url: item.url,
+        type: item.type === "video" ? "video" : "image",
+        alt: item.altText || item.title || field.label,
+        thumbnail: item.thumbnailUrl
+      }))
+    ]);
+  };
+  const handleDragStart = (index) => {
+    setDraggedIndex(index);
+  };
+  const handleDragOver = (e, index) => {
+    e.preventDefault();
+    if (draggedIndex === null || draggedIndex === index) return;
+    const newImages = [...images];
+    const [removed] = newImages.splice(draggedIndex, 1);
+    newImages.splice(index, 0, removed);
+    onChange(newImages);
+    setDraggedIndex(index);
+  };
+  const handleDragEnd = () => {
+    setDraggedIndex(null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
+      images.map((img, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          draggable: true,
+          onDragStart: () => handleDragStart(index),
+          onDragOver: (e) => handleDragOver(e, index),
+          onDragEnd: handleDragEnd,
+          className: `relative group aspect-square rounded-md overflow-x-auto bg-[var(--bg-muted)] border-2 cursor-move ${draggedIndex === index ? "border-brand-500 opacity-50" : "border-transparent hover:border-[var(--border-strong)]"}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: img.type === "video" ? img.thumbnail || img.url : img.isCloudinary && img.publicId ? buildCloudinaryUrl(img.publicId, "thumbnail") : img.url,
+                alt: img.alt || `Gallery image ${index + 1}`,
+                className: "w-full h-full object-cover",
+                loading: "lazy"
+              }
+            ),
+            img.type === "video" && /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 bg-black/70 text-white rounded-full p-1", children: /* @__PURE__ */ jsx(Play, {}) }),
+            /* @__PURE__ */ jsx("div", { className: "absolute top-1 left-1 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(GripVertical, { className: "size-4 text-white drop-shadow-lg" }) }),
+            /* @__PURE__ */ jsx("div", { className: "absolute bottom-1 left-1 bg-black/60 text-white text-xs px-2 py-0.5 rounded", children: index + 1 }),
+            /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: () => handleEdit(index),
+                  disabled,
+                  title: "Edit image",
+                  children: /* @__PURE__ */ jsx(Edit3, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "danger",
+                  size: "icon",
+                  onClick: () => handleRemove(index),
+                  disabled,
+                  title: "Remove image",
+                  children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+                }
+              )
+            ] })
+          ]
+        },
+        `${img.url}-${index}`
+      )),
+      canAddMore && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleAddNew,
+          disabled: disabled || uploading !== null,
+          className: `aspect-square rounded-md border-2 border-dashed flex flex-col items-center justify-center gap-1 transition-colors ${disabled || uploading !== null ? "border-[var(--border-default)] bg-[var(--bg-subtle)] cursor-not-allowed" : "border-[var(--border-strong)] hover:border-brand-500 hover:bg-[var(--accent-secondary)]/30 cursor-pointer"}`,
+          children: uploading !== null ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-5 h-5 border-2 border-brand-500 border-t-transparent rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)]", children: "Uploading..." })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ImagePlus, { className: "size-6 text-[var(--text-muted)]" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)]", children: "Add media" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-3xs text-[var(--text-muted)]", children: [
+              images.length,
+              "/",
+              maxImages
+            ] })
+          ] })
+        }
+      )
+    ] }),
+    canAddMore && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setPicking(true),
+        disabled,
+        className: "text-xs text-brand-500 transition-colors hover:text-brand-600 disabled:opacity-50",
+        children: "Choose from your gallery"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MediaLibraryPicker,
+      {
+        open: picking,
+        onOpenChange: setPicking,
+        remaining: maxImages - images.length,
+        onPick: handlePickFromLibrary
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FileInput,
+      {
+        ref: fileInputRef,
+        accept: "image/*,video/mp4,video/quicktime,video/webm",
+        multiple: true,
+        onFiles: handleFileSelect,
+        disabled: disabled || uploading !== null
+      }
+    ),
+    isOverFreeLimit && maxImages > freeLimit && /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--warning)] flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(Info, {}),
+      "Images beyond ",
+      freeLimit,
+      " require a premium plan"
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--error)]", children: error }),
+    images.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: "Drag and drop to reorder media. First item will be the main display." })
+  ] });
+}
+export {
+  GalleryField,
+  ImageField
+};
+//# sourceMappingURL=fields-media.js.map

package/dist/dynamic-form/fields-media.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/dynamic-form/fields-media.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useCallback } from 'react';\nimport { type ContentFieldConfig } from '@withpotter/lib/template-types';\nimport { X, Info, Edit3, GripVertical, ImagePlus, Play } from 'lucide-react';\nimport { uploadImage, buildCloudinaryUrl } from '@withpotter/lib/media-service';\nimport { MediaLibraryPicker } from '@withpotter/components/media/media-library-picker';\nimport type { GalleryItem as GalleryLibraryItem } from '@withpotter/lib/api/types';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { FileInput } from '@withpotter/ui-kit';\nimport { useImageUpload, type FieldRendererProps } from './shared';\n\n/**\n * One image, and many.\n *\n * The gallery carries the drag-to-reorder, the per-item upload state and the\n * library picker, which is why it is three times the size of the single-image\n * field beside it.\n */\n\nexport function ImageField({\n  field,\n  value,\n  onChange,\n  disabled,\n}: FieldRendererProps) {\n  const openImageUpload = useImageUpload();\n\n  const imageUrl = value as\n    | string\n    | { url: string; publicId?: string; alt?: string }\n    | undefined;\n  const url = typeof imageUrl === 'object' ? imageUrl?.url : imageUrl;\n  const alt = typeof imageUrl === 'object' ? imageUrl?.alt : field.label;\n\n  const handleOpen = useCallback(() => {\n    openImageUpload({\n      onSuccess: (result) => {\n        onChange({\n          url: result.url,\n          alt: result.alt || field.label,\n          publicId: result.publicId,\n          isCloudinary: result.isCloudinary,\n        });\n      },\n      title: `Upload ${field.label}`,\n      initialUrl: url,\n      initialAlt: alt,\n      aspectRatio: 1,\n    });\n  }, [openImageUpload, onChange, field.label, url, alt]);\n\n  return (\n    <div className=\"space-y-2\">\n      {/* Grid layout matching gallery */}\n      <div className=\"grid grid-cols-3 gap-3\">\n        {url ? (\n          // Image preview as grid item\n          <div className=\"relative group aspect-square rounded-md overflow-x-auto bg-[var(--bg-muted)] border-2 border-transparent hover:border-[var(--border-strong)]\">\n            {/* eslint-disable-next-line @next/next/no-img-element */}\n            <img\n              src={url}\n              alt={alt || field.label}\n              className=\"w-full h-full object-cover\"\n            />\n\n            {/* Overlay with actions */}\n            <div className=\"absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2\">\n              {/* Edit/Replace image */}\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={handleOpen}\n                disabled={disabled}\n                title=\"Edit image\"\n              >\n                <Edit3 className=\"size-4\" />\n              </Button>\n\n              {/* Remove image */}\n              <Button\n                variant=\"danger\"\n                size=\"icon\"\n                onClick={() => onChange(undefined)}\n                disabled={disabled}\n                title=\"Remove image\"\n              >\n                <X className=\"size-4\" />\n              </Button>\n            </div>\n          </div>\n        ) : (\n          // Upload button as grid item\n          <button\n            type=\"button\"\n            onClick={() => !disabled && handleOpen()}\n            disabled={disabled}\n            className={`aspect-square rounded-md border-2 border-dashed flex flex-col items-center justify-center gap-1 transition-colors ${\n              disabled\n                ? 'border-[var(--border-default)] bg-[var(--bg-subtle)] cursor-not-allowed'\n                : 'border-[var(--border-strong)] hover:border-brand-500 hover:bg-[var(--accent-secondary)]/30 cursor-pointer'\n            }`}\n          >\n            <ImagePlus className=\"size-6 text-[var(--text-muted)]\" />\n            <span className=\"text-xs text-[var(--text-tertiary)]\">\n              Add image\n            </span>\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// Image data type for gallery\nexport interface GalleryImage {\n  url: string;\n  type?: 'image' | 'video';\n  alt?: string;\n  thumbnail?: string;\n  duration?: number;\n  publicId?: string;\n  isCloudinary?: boolean;\n}\n\n// GalleryField handles multiple images in a grid layout\n// Supports configurable max images (default 3, more requires billing upgrade)\nexport function GalleryField({\n  field,\n  value,\n  onChange,\n  disabled,\n}: FieldRendererProps) {\n  const openImageUpload = useImageUpload();\n  const [uploading, setUploading] = useState<number | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);\n  const [picking, setPicking] = useState(false);\n  const fileInputRef = React.useRef<HTMLInputElement>(null);\n\n  // Get max images from field config (default 3, premium unlocks more)\n  const maxImages =\n    (field as ContentFieldConfig & { maxImages?: number }).maxImages || 3;\n  const freeLimit = 3; // Free tier limit\n\n  // Parse value as array of images\n  const images: GalleryImage[] = Array.isArray(value)\n    ? value.map((img) => (typeof img === 'string' ? { url: img } : img))\n    : [];\n\n  const canAddMore = images.length < maxImages;\n  const isOverFreeLimit = images.length >= freeLimit;\n\n  const handleFileSelect = async (files: File[]) => {\n    // Filter valid media\n    const validFiles = files.filter((file) => {\n      const isImage = file.type.startsWith('image/');\n      const isVideo = file.type.startsWith('video/');\n      if (!isImage && !isVideo) return false;\n      const maxSize = isVideo ? 100 * 1024 * 1024 : 10 * 1024 * 1024;\n      if (file.size > maxSize) return false;\n      return true;\n    });\n\n    if (validFiles.length === 0) {\n      setError('No valid media selected (images <= 10MB, videos <= 100MB)');\n      return;\n    }\n\n    // Limit to remaining slots\n    const remaining = maxImages - images.length;\n    const filesToUpload = validFiles.slice(0, remaining);\n\n    setError(null);\n\n    // Upload files sequentially\n    for (let i = 0; i < filesToUpload.length; i++) {\n      setUploading(images.length + i);\n      try {\n        const result = await uploadImage(filesToUpload[i]);\n        const newImage: GalleryImage = {\n          url: result.url,\n          type: result.resourceType === 'video' ? 'video' : 'image',\n          alt: field.label,\n          thumbnail: result.thumbnail,\n          duration: result.duration,\n          publicId: result.publicId,\n          isCloudinary: result.isCloudinary,\n        };\n        // Update images array\n        onChange([...images, newImage]);\n        // Re-read to get latest\n        images.push(newImage);\n      } catch (err) {\n        console.error('Image upload error:', err);\n        setError(`Failed to upload ${filesToUpload[i].name}`);\n      }\n    }\n    setUploading(null);\n\n    // Reset input\n    if (fileInputRef.current) {\n      fileInputRef.current.value = '';\n    }\n  };\n\n  const handleRemove = (index: number) => {\n    const newImages = [...images];\n    newImages.splice(index, 1);\n    onChange(newImages.length > 0 ? newImages : undefined);\n  };\n\n  const handleEdit = (index: number) => {\n    openImageUpload({\n      onSuccess: (result) => {\n        const newImage: GalleryImage = {\n          url: result.url,\n          type: result.resourceType === 'video' ? 'video' : 'image',\n          alt: result.alt || field.label,\n          thumbnail: result.thumbnail,\n          duration: result.duration,\n          publicId: result.publicId,\n          isCloudinary: result.isCloudinary,\n        };\n        const newImages = [...images];\n        newImages[index] = newImage;\n        onChange(newImages);\n      },\n      title: `Edit image ${index + 1}`,\n      initialUrl: images[index]?.url,\n      initialAlt: images[index]?.alt,\n      aspectRatio: 1,\n      accept: 'image/*,video/mp4,video/quicktime,video/webm',\n    });\n  };\n\n  const handleAddNew = () => {\n    openImageUpload({\n      onSuccess: (result) => {\n        const newImage: GalleryImage = {\n          url: result.url,\n          type: result.resourceType === 'video' ? 'video' : 'image',\n          alt: result.alt || field.label,\n          thumbnail: result.thumbnail,\n          duration: result.duration,\n          publicId: result.publicId,\n          isCloudinary: result.isCloudinary,\n        };\n        onChange([...images, newImage]);\n      },\n      title: `Add gallery image`,\n      aspectRatio: 1,\n      accept: 'image/*,video/mp4,video/quicktime,video/webm',\n    });\n  };\n\n  /** Pull images the merchant already uploaded to Website → Gallery. */\n  const handlePickFromLibrary = (picked: GalleryLibraryItem[]) => {\n    if (picked.length === 0) return;\n    onChange([\n      ...images,\n      ...picked.map<GalleryImage>((item) => ({\n        url: item.url,\n        type: item.type === 'video' ? 'video' : 'image',\n        alt: item.altText || item.title || field.label,\n        thumbnail: item.thumbnailUrl,\n      })),\n    ]);\n  };\n\n  // Drag and drop reordering\n  const handleDragStart = (index: number) => {\n    setDraggedIndex(index);\n  };\n\n  const handleDragOver = (e: React.DragEvent, index: number) => {\n    e.preventDefault();\n    if (draggedIndex === null || draggedIndex === index) return;\n\n    const newImages = [...images];\n    const [removed] = newImages.splice(draggedIndex, 1);\n    newImages.splice(index, 0, removed);\n    onChange(newImages);\n    setDraggedIndex(index);\n  };\n\n  const handleDragEnd = () => {\n    setDraggedIndex(null);\n  };\n\n  return (\n    <div className=\"space-y-3\">\n      {/* Image Grid */}\n      <div className=\"grid grid-cols-3 gap-3\">\n        {images.map((img, index) => (\n          <div\n            key={`${img.url}-${index}`}\n            draggable\n            onDragStart={() => handleDragStart(index)}\n            onDragOver={(e) => handleDragOver(e, index)}\n            onDragEnd={handleDragEnd}\n            className={`relative group aspect-square rounded-md overflow-x-auto bg-[var(--bg-muted)] border-2 cursor-move ${\n              draggedIndex === index\n                ? 'border-brand-500 opacity-50'\n                : 'border-transparent hover:border-[var(--border-strong)]'\n            }`}\n          >\n            {/* eslint-disable-next-line @next/next/no-img-element */}\n            <img\n              src={\n                img.type === 'video'\n                  ? img.thumbnail || img.url\n                  : img.isCloudinary && img.publicId\n                    ? buildCloudinaryUrl(img.publicId, 'thumbnail')\n                    : img.url\n              }\n              alt={img.alt || `Gallery image ${index + 1}`}\n              className=\"w-full h-full object-cover\"\n              loading=\"lazy\"\n            />\n\n            {img.type === 'video' && (\n              <div className=\"absolute top-1 right-1 bg-black/70 text-white rounded-full p-1\">\n                <Play />\n              </div>\n            )}\n\n            {/* Drag handle indicator */}\n            <div className=\"absolute top-1 left-1 opacity-0 group-hover:opacity-100 transition-opacity\">\n              <GripVertical className=\"size-4 text-white drop-shadow-lg\" />\n            </div>\n\n            {/* Image index badge */}\n            <div className=\"absolute bottom-1 left-1 bg-black/60 text-white text-xs px-2 py-0.5 rounded\">\n              {index + 1}\n            </div>\n\n            {/* Overlay with actions */}\n            <div className=\"absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2\">\n              {/* Edit image */}\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={() => handleEdit(index)}\n                disabled={disabled}\n                title=\"Edit image\"\n              >\n                <Edit3 className=\"size-4\" />\n              </Button>\n\n              {/* Remove image */}\n              <Button\n                variant=\"danger\"\n                size=\"icon\"\n                onClick={() => handleRemove(index)}\n                disabled={disabled}\n                title=\"Remove image\"\n              >\n                <X className=\"size-4\" />\n              </Button>\n            </div>\n          </div>\n        ))}\n\n        {/* Add more button */}\n        {canAddMore && (\n          <button\n            type=\"button\"\n            onClick={handleAddNew}\n            disabled={disabled || uploading !== null}\n            className={`aspect-square rounded-md border-2 border-dashed flex flex-col items-center justify-center gap-1 transition-colors ${\n              disabled || uploading !== null\n                ? 'border-[var(--border-default)] bg-[var(--bg-subtle)] cursor-not-allowed'\n                : 'border-[var(--border-strong)] hover:border-brand-500 hover:bg-[var(--accent-secondary)]/30 cursor-pointer'\n            }`}\n          >\n            {uploading !== null ? (\n              <div className=\"flex flex-col items-center gap-1\">\n                <div className=\"w-5 h-5 border-2 border-brand-500 border-t-transparent rounded-full animate-spin\" />\n                <span className=\"text-xs text-[var(--text-tertiary)]\">\n                  Uploading...\n                </span>\n              </div>\n            ) : (\n              <>\n                <ImagePlus className=\"size-6 text-[var(--text-muted)]\" />\n                <span className=\"text-xs text-[var(--text-tertiary)]\">\n                  Add media\n                </span>\n                <span className=\"text-3xs text-[var(--text-muted)]\">\n                  {images.length}/{maxImages}\n                </span>\n              </>\n            )}\n          </button>\n        )}\n      </div>\n\n      {/* The merchant's own photo library, one click away instead of a trip\n          out to Website → Gallery and back. */}\n      {canAddMore && (\n        <button\n          type=\"button\"\n          onClick={() => setPicking(true)}\n          disabled={disabled}\n          className=\"text-xs text-brand-500 transition-colors hover:text-brand-600 disabled:opacity-50\"\n        >\n          Choose from your gallery\n        </button>\n      )}\n\n      <MediaLibraryPicker\n        open={picking}\n        onOpenChange={setPicking}\n        remaining={maxImages - images.length}\n        onPick={handlePickFromLibrary}\n      />\n\n      {/* Hidden file input for drag-drop onto grid items */}\n      <FileInput\n        ref={fileInputRef}\n        accept=\"image/*,video/mp4,video/quicktime,video/webm\"\n        multiple\n        onFiles={handleFileSelect}\n        disabled={disabled || uploading !== null}\n      />\n\n      {/* Info/warning messages */}\n      {isOverFreeLimit && maxImages > freeLimit && (\n        <p className=\"text-xs text-[var(--warning)] flex items-center gap-1\">\n          <Info />\n          Images beyond {freeLimit} require a premium plan\n        </p>\n      )}\n\n      {error && <p className=\"text-xs text-[var(--error)]\">{error}</p>}\n\n      {images.length === 0 && (\n        <p className=\"text-xs text-[var(--text-tertiary)]\">\n          Drag and drop to reorder media. First item will be the main display.\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dynamic-form/fields-reference.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type FieldRendererProps } from './shared';
+/**
+ * Fields that resolve against something the API owns: resources and plans.
+ *
+ * Both fetch on open rather than on mount — a form with six of these should
+ * not fire six requests to render a page the merchant may never scroll to.
+ */
+export declare function ResourceSelectField({ field, value, onChange, error, disabled, }: FieldRendererProps): React.JSX.Element;
+export declare function PlanRefField({ field, value, onChange, error, disabled, }: FieldRendererProps): React.JSX.Element;

package/dist/dynamic-form/fields-reference.js

@@ -0,0 +1,271 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import React, { useState, useCallback, useContext } from "react";
+import { ChevronDown } from "lucide-react";
+import { TenantContext } from "./shared";
+function ResourceSelectField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [openUpward, setOpenUpward] = useState(false);
+  const [resources, setResources] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const buttonRef = React.useRef(null);
+  const tenantSlug = useContext(TenantContext);
+  const resourceType = field.resourceType;
+  const valueField = field.valueField || "name";
+  const selectedResource = resources.find(
+    (r) => valueField === "id" ? r.id === value : r.name === value
+  );
+  const handleOpen = async () => {
+    if (disabled) return;
+    if (!isOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      setOpenUpward(spaceBelow < 250);
+    }
+    if (!isOpen && resources.length === 0 && tenantSlug) {
+      setLoading(true);
+      try {
+        const { resourcesApi } = await import("@withpotter/lib/api");
+        const response = await resourcesApi.list(tenantSlug, resourceType);
+        setResources(response.data || []);
+      } catch (err) {
+        console.error("Failed to fetch resources:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    setIsOpen(!isOpen);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        onClick: handleOpen,
+        disabled,
+        className: `w-full px-3 py-2 rounded-md border text-left flex items-center justify-between ${error ? "border-[var(--error)]" : isOpen ? "border-brand-500 ring-2 ring-brand-500" : "border-[var(--border-default)] hover:border-[var(--border-strong)]"} bg-[var(--bg-base)] text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: selectedResource ? "text-[var(--text-primary)]" : "text-[var(--text-tertiary)]",
+              children: selectedResource?.name || value || `Select ${field.label}...`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `w-4 h-4 text-[var(--text-muted)] transition-transform ${isOpen ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-[60]",
+          onClick: () => setIsOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `absolute z-[70] w-full bg-[var(--bg-base)] border border-[var(--border-subtle)] rounded-md shadow-lg max-h-60 overflow-y-auto ${openUpward ? "bottom-full mb-1" : "top-full mt-1"}`,
+          children: loading ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-[var(--text-tertiary)]", children: "Loading..." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onChange(void 0);
+                  setIsOpen(false);
+                },
+                className: "w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] text-[var(--text-tertiary)]",
+                children: [
+                  "No ",
+                  field.label
+                ]
+              }
+            ),
+            resources.map((resource) => {
+              const resourceValue = valueField === "id" ? resource.id : resource.name;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    onChange(resourceValue);
+                    setIsOpen(false);
+                  },
+                  className: `w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] ${value === resourceValue ? "bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)] font-medium" : "text-[var(--text-primary)]"}`,
+                  children: resource.name
+                },
+                resource.id
+              );
+            }),
+            resources.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-[var(--text-tertiary)]", children: "No resources available" })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+function PlanRefField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [openUpward, setOpenUpward] = useState(false);
+  const [plans, setPlans] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState(null);
+  const buttonRef = React.useRef(null);
+  const tenantSlug = useContext(TenantContext);
+  const includeInactive = Boolean(
+    field.includeInactive
+  );
+  const selectedPlan = plans.find((p) => p.id === value);
+  const fetchPlans = useCallback(async () => {
+    if (!tenantSlug) return;
+    setLoading(true);
+    setLoadError(null);
+    try {
+      const { merchantSubscriptionsApi } = await import("@withpotter/lib/api");
+      if (includeInactive) {
+        const res = await merchantSubscriptionsApi.listPlans(tenantSlug, {
+          limit: 200
+        });
+        setPlans(res?.plans ?? []);
+      } else {
+        const active = await merchantSubscriptionsApi.getActivePlans(tenantSlug);
+        setPlans(active ?? []);
+      }
+    } catch (err) {
+      console.error("Failed to fetch plans:", err);
+      setLoadError("Could not load plans.");
+    } finally {
+      setLoading(false);
+    }
+  }, [tenantSlug, includeInactive]);
+  const handleOpen = async () => {
+    if (disabled) return;
+    if (!isOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      setOpenUpward(spaceBelow < 280);
+    }
+    if (!isOpen && plans.length === 0 && !loadError) {
+      await fetchPlans();
+    }
+    setIsOpen(!isOpen);
+  };
+  const formatPlanLabel = (plan) => {
+    const parts = [plan.name];
+    if (plan.groupLabel && plan.groupLabel !== plan.name) {
+      parts.push(`(${plan.groupLabel})`);
+    }
+    parts.push(`\xB7 ${plan.interval}`);
+    return parts.join(" ");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        onClick: handleOpen,
+        disabled,
+        className: `w-full px-3 py-2 rounded-md border text-left flex items-center justify-between ${error ? "border-[var(--error)]" : isOpen ? "border-brand-500 ring-2 ring-brand-500" : "border-[var(--border-default)] hover:border-[var(--border-strong)]"} bg-[var(--bg-base)] text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: selectedPlan ? "text-[var(--text-primary)]" : "text-[var(--text-tertiary)]",
+              children: selectedPlan ? formatPlanLabel(selectedPlan) : value || `Select ${field.label.toLowerCase()}...`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `w-4 h-4 text-[var(--text-muted)] transition-transform ${isOpen ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-[60]",
+          onClick: () => setIsOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `absolute z-[70] w-full bg-[var(--bg-base)] border border-[var(--border-subtle)] rounded-md shadow-lg max-h-72 overflow-y-auto ${openUpward ? "bottom-full mb-1" : "top-full mt-1"}`,
+          children: loading ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-[var(--text-tertiary)]", children: "Loading plans\u2026" }) : loadError ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-[var(--error)]", children: loadError }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onChange(void 0);
+                  setIsOpen(false);
+                },
+                className: "w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] text-[var(--text-tertiary)]",
+                children: "No plan"
+              }
+            ),
+            plans.map((plan) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onChange(plan.id);
+                  setIsOpen(false);
+                },
+                className: `w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] ${value === plan.id ? "bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)] font-medium" : "text-[var(--text-primary)]"}`,
+                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: formatPlanLabel(plan) }),
+                  plan.status && plan.status !== "active" && /* @__PURE__ */ jsx("span", { className: "text-3xs uppercase tracking-wide text-[var(--text-tertiary)] shrink-0", children: plan.status })
+                ] })
+              },
+              plan.id
+            )),
+            plans.length === 0 && !loading && /* @__PURE__ */ jsxs("div", { className: "px-3 py-3 text-sm text-[var(--text-tertiary)] space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { children: "No subscription plans yet." }),
+              /* @__PURE__ */ jsx(
+                Link,
+                {
+                  href: "/dashboard/subscriptions/plans/new",
+                  className: "inline-block text-brand-500 hover:underline",
+                  children: "Create a plan \u2192"
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  PlanRefField,
+  ResourceSelectField
+};
+//# sourceMappingURL=fields-reference.js.map