@withpotter/components 0.13.0-next.101

package/dist/features/product-form/basics-step.js

@@ -0,0 +1,381 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, closestCenter } from "@dnd-kit/core";
+import {
+  SortableContext,
+  horizontalListSortingStrategy,
+  useSortable
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Edit3, GripVertical, ImagePlus, Play, Trash2 } from "lucide-react";
+import { ImageUploadModal } from "@withpotter/components/image-upload-modal";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input, Textarea } from "@withpotter/ui-kit";
+import { CurrencyField } from "./currency-field";
+const MAX_GALLERY_ITEMS = 20;
+function createGalleryItemId(url) {
+  return `${url}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function createBasicsStep({
+  title,
+  setTitle,
+  heroImage,
+  setHeroImage,
+  showHeroImageModal,
+  setShowHeroImageModal,
+  galleryItems,
+  setGalleryItems,
+  gallerySensors,
+  handleGalleryDragEnd,
+  showGalleryMediaModal,
+  setShowGalleryMediaModal,
+  editingGalleryIndex,
+  setEditingGalleryIndex,
+  description,
+  setDescription,
+  currencySymbol,
+  priceFocused,
+  setPriceFocused,
+  priceDisplay,
+  setPriceDisplay,
+  price,
+  setPrice,
+  compareFocused,
+  setCompareFocused,
+  compareDisplay,
+  setCompareDisplay,
+  compareAtPrice,
+  setCompareAtPrice,
+  formatCurrency,
+  parseCurrency
+}) {
+  return {
+    key: "basics",
+    label: "Basics",
+    description: "Name, image, and pricing for this product",
+    content: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("fieldset", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("legend", { className: "text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider", children: "Title & Image" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: [
+            "Title ",
+            /* @__PURE__ */ jsx("span", { className: "text-[var(--error)]", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: title,
+              onChange: (event) => setTitle(event.target.value),
+              placeholder: "e.g. Silk Blouse"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-2", children: "Hero image" }),
+          heroImage?.url ? /* @__PURE__ */ jsxs("div", { className: "relative group w-32 h-32 rounded-md overflow-x-auto bg-[var(--bg-muted)] border border-[var(--border-default)]", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: heroImage.url,
+                alt: heroImage.alt || title || "Product hero image",
+                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: () => setShowHeroImageModal(true),
+                  title: "Replace hero image",
+                  children: /* @__PURE__ */ jsx(Edit3, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "danger",
+                  size: "icon",
+                  onClick: () => setHeroImage(null),
+                  title: "Remove hero image",
+                  children: /* @__PURE__ */ jsx(Trash2, {})
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowHeroImageModal(true),
+              className: "w-32 h-32 rounded-md border-2 border-dashed border-[var(--border-strong)] flex flex-col items-center justify-center gap-2 hover:border-brand-500 hover:bg-[var(--accent-secondary)]/30 transition-colors cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx(ImagePlus, { className: "size-6 text-[var(--text-muted)]" }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)]", children: "Upload hero" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ImageUploadModal,
+            {
+              isOpen: showHeroImageModal,
+              onClose: () => setShowHeroImageModal(false),
+              onSuccess: (result) => {
+                setHeroImage({
+                  url: result.url,
+                  type: "image",
+                  alt: result.alt || title || "Product image"
+                });
+              },
+              title: "Upload hero image",
+              initialUrl: heroImage?.url,
+              initialAlt: heroImage?.alt,
+              aspectRatio: 1,
+              accept: "image/*"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)]", children: "Gallery" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--text-muted)]", children: [
+              galleryItems.length,
+              "/",
+              MAX_GALLERY_ITEMS
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            DndContext,
+            {
+              sensors: gallerySensors,
+              collisionDetection: closestCenter,
+              onDragEnd: handleGalleryDragEnd,
+              children: /* @__PURE__ */ jsx(
+                SortableContext,
+                {
+                  items: galleryItems.map((item) => item.id),
+                  strategy: horizontalListSortingStrategy,
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3 overflow-x-auto pb-2", children: [
+                    galleryItems.map((item, index) => /* @__PURE__ */ jsx(
+                      SortableGalleryItem,
+                      {
+                        item,
+                        index,
+                        onEdit: (itemIndex) => {
+                          setEditingGalleryIndex(itemIndex);
+                          setShowGalleryMediaModal(true);
+                        },
+                        onRemove: (itemIndex) => {
+                          setGalleryItems(
+                            (previous) => previous.filter((_, index2) => index2 !== itemIndex)
+                          );
+                        },
+                        onSetAsHero: (itemIndex) => {
+                          const candidate = galleryItems[itemIndex];
+                          if (!candidate || candidate.type === "video") return;
+                          setHeroImage({ ...candidate, type: "image" });
+                        },
+                        disabledSetAsHero: false
+                      },
+                      item.id
+                    )),
+                    galleryItems.length < MAX_GALLERY_ITEMS && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          setEditingGalleryIndex(null);
+                          setShowGalleryMediaModal(true);
+                        },
+                        className: "w-28 h-28 rounded-md border-2 border-dashed border-[var(--border-strong)] flex flex-col items-center justify-center gap-2 hover:border-brand-500 hover:bg-[var(--accent-secondary)]/30 transition-colors cursor-pointer shrink-0",
+                        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__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Drag to reorder. Videos are allowed in gallery. Hero must be an image." }),
+          /* @__PURE__ */ jsx(
+            ImageUploadModal,
+            {
+              isOpen: showGalleryMediaModal,
+              onClose: () => {
+                setShowGalleryMediaModal(false);
+                setEditingGalleryIndex(null);
+              },
+              onSuccess: (result) => {
+                const nextItem = {
+                  id: createGalleryItemId(result.url),
+                  url: result.url,
+                  type: result.resourceType === "video" ? "video" : "image",
+                  alt: result.alt,
+                  width: result.width,
+                  height: result.height,
+                  thumbnail: result.thumbnail,
+                  duration: result.duration
+                };
+                setGalleryItems((previous) => {
+                  if (editingGalleryIndex !== null && editingGalleryIndex >= 0 && editingGalleryIndex < previous.length) {
+                    const next = [...previous];
+                    next[editingGalleryIndex] = {
+                      ...nextItem,
+                      id: previous[editingGalleryIndex].id
+                    };
+                    return next;
+                  }
+                  if (previous.length >= MAX_GALLERY_ITEMS) return previous;
+                  return [...previous, nextItem];
+                });
+                setShowGalleryMediaModal(false);
+                setEditingGalleryIndex(null);
+              },
+              title: editingGalleryIndex !== null ? "Replace Gallery Media" : "Add Gallery Media",
+              initialUrl: editingGalleryIndex !== null ? galleryItems[editingGalleryIndex]?.url : void 0,
+              initialAlt: editingGalleryIndex !== null ? galleryItems[editingGalleryIndex]?.alt : void 0,
+              accept: "image/*,video/mp4,video/quicktime,video/webm"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Description" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: description,
+              onChange: (event) => setDescription(event.target.value),
+              rows: 3,
+              placeholder: "Product description\u2026"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("legend", { className: "text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider", children: "Pricing" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsx(
+            CurrencyField,
+            {
+              label: `Price (${currencySymbol})`,
+              currencySymbol,
+              focused: priceFocused,
+              setFocused: setPriceFocused,
+              display: priceDisplay,
+              setDisplay: setPriceDisplay,
+              value: price,
+              setValue: setPrice,
+              formatCurrency,
+              parseCurrency
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CurrencyField,
+            {
+              label: "Compare at price",
+              currencySymbol,
+              focused: compareFocused,
+              setFocused: setCompareFocused,
+              display: compareDisplay,
+              setDisplay: setCompareDisplay,
+              value: compareAtPrice,
+              setValue: setCompareAtPrice,
+              formatCurrency,
+              parseCurrency
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    validate: () => title.trim() ? true : "Please enter a title."
+  };
+}
+function SortableGalleryItem({
+  item,
+  index,
+  onEdit,
+  onRemove,
+  onSetAsHero,
+  disabledSetAsHero
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: item.id });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style: {
+        transform: CSS.Transform.toString(transform),
+        transition
+      },
+      className: "relative w-28 h-28 rounded-md overflow-hidden border border-[var(--border-default)] bg-[var(--bg-muted)] shrink-0",
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.type === "video" ? item.thumbnail || item.url : item.url,
+            alt: item.alt || `Gallery item ${index + 1}`,
+            className: "w-full h-full object-cover"
+          }
+        ),
+        item.type === "video" && /* @__PURE__ */ jsx("div", { className: "absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-black/70 text-white text-3xs flex items-center justify-center", children: /* @__PURE__ */ jsx(Play, {}) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ...attributes,
+            ...listeners,
+            className: "absolute top-1.5 left-1.5 w-5 h-5 rounded-full bg-black/70 text-white flex items-center justify-center cursor-grab active:cursor-grabbing",
+            title: "Drag to reorder",
+            children: /* @__PURE__ */ jsx(GripVertical, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/80 to-black/0 text-white flex items-center justify-between gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "text-3xs",
+              onClick: () => onSetAsHero(index),
+              disabled: disabledSetAsHero || item.type === "video",
+              title: item.type === "video" ? "Hero must be an image" : "Set as hero",
+              children: "Hero"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "text-3xs",
+                onClick: () => onEdit(index),
+                title: "Edit media",
+                children: "Edit"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "danger",
+                size: "sm",
+                className: "text-3xs",
+                onClick: () => onRemove(index),
+                title: "Remove media",
+                children: "Remove"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MAX_GALLERY_ITEMS,
+  createBasicsStep
+};
+//# sourceMappingURL=basics-step.js.map

package/dist/features/product-form/basics-step.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/product-form/basics-step.tsx"],"sourcesContent":["'use client';\n\nimport type { Dispatch, SetStateAction } from 'react';\nimport type { DragEndEvent } from '@dnd-kit/core';\nimport { DndContext, closestCenter, type useSensors } from '@dnd-kit/core';\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  useSortable,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { Edit3, GripVertical, ImagePlus, Play, Trash2 } from 'lucide-react';\nimport type { ProductMedia } from '@withpotter/lib/product-types';\nimport { ImageUploadModal } from '@withpotter/components/image-upload-modal';\nimport type { FormStep } from '@withpotter/ui-kit/form-stepper-panel';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Input, Textarea } from '@withpotter/ui-kit';\nimport { CurrencyField } from './currency-field';\n\nexport interface ProductGalleryItem extends ProductMedia {\n  id: string;\n}\n\nexport const MAX_GALLERY_ITEMS = 20;\n\nfunction createGalleryItemId(url: string): string {\n  return `${url}-${Math.random().toString(36).slice(2, 10)}`;\n}\n\ninterface BasicsStepProps {\n  title: string;\n  setTitle: Dispatch<SetStateAction<string>>;\n  heroImage: ProductMedia | null;\n  setHeroImage: Dispatch<SetStateAction<ProductMedia | null>>;\n  showHeroImageModal: boolean;\n  setShowHeroImageModal: Dispatch<SetStateAction<boolean>>;\n  galleryItems: ProductGalleryItem[];\n  setGalleryItems: Dispatch<SetStateAction<ProductGalleryItem[]>>;\n  gallerySensors: ReturnType<typeof useSensors>;\n  handleGalleryDragEnd: (event: DragEndEvent) => void;\n  showGalleryMediaModal: boolean;\n  setShowGalleryMediaModal: Dispatch<SetStateAction<boolean>>;\n  editingGalleryIndex: number | null;\n  setEditingGalleryIndex: Dispatch<SetStateAction<number | null>>;\n  description: string;\n  setDescription: Dispatch<SetStateAction<string>>;\n  currencySymbol: string;\n  priceFocused: boolean;\n  setPriceFocused: Dispatch<SetStateAction<boolean>>;\n  priceDisplay: string;\n  setPriceDisplay: Dispatch<SetStateAction<string>>;\n  price: number | undefined;\n  setPrice: Dispatch<SetStateAction<number | undefined>>;\n  compareFocused: boolean;\n  setCompareFocused: Dispatch<SetStateAction<boolean>>;\n  compareDisplay: string;\n  setCompareDisplay: Dispatch<SetStateAction<string>>;\n  compareAtPrice: number | undefined;\n  setCompareAtPrice: Dispatch<SetStateAction<number | undefined>>;\n  formatCurrency: (value: number | undefined) => string;\n  parseCurrency: (value: string) => number | undefined;\n}\n\nexport function createBasicsStep({\n  title,\n  setTitle,\n  heroImage,\n  setHeroImage,\n  showHeroImageModal,\n  setShowHeroImageModal,\n  galleryItems,\n  setGalleryItems,\n  gallerySensors,\n  handleGalleryDragEnd,\n  showGalleryMediaModal,\n  setShowGalleryMediaModal,\n  editingGalleryIndex,\n  setEditingGalleryIndex,\n  description,\n  setDescription,\n  currencySymbol,\n  priceFocused,\n  setPriceFocused,\n  priceDisplay,\n  setPriceDisplay,\n  price,\n  setPrice,\n  compareFocused,\n  setCompareFocused,\n  compareDisplay,\n  setCompareDisplay,\n  compareAtPrice,\n  setCompareAtPrice,\n  formatCurrency,\n  parseCurrency,\n}: BasicsStepProps): FormStep {\n  return {\n    key: 'basics',\n    label: 'Basics',\n    description: 'Name, image, and pricing for this product',\n    content: (\n      <div className=\"space-y-6\">\n        <fieldset className=\"space-y-4\">\n          <legend className=\"text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider\">\n            Title &amp; Image\n          </legend>\n\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Title <span className=\"text-[var(--error)]\">*</span>\n            </label>\n            <Input\n              value={title}\n              onChange={(event) => setTitle(event.target.value)}\n              placeholder=\"e.g. Silk Blouse\"\n            />\n          </div>\n\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-2\">\n              Hero image\n            </label>\n            {heroImage?.url ? (\n              <div className=\"relative group w-32 h-32 rounded-md overflow-x-auto bg-[var(--bg-muted)] border border-[var(--border-default)]\">\n                {/* eslint-disable-next-line @next/next/no-img-element */}\n                <img\n                  src={heroImage.url}\n                  alt={heroImage.alt || title || 'Product hero image'}\n                  className=\"w-full h-full object-cover\"\n                />\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                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    onClick={() => setShowHeroImageModal(true)}\n                    title=\"Replace hero image\"\n                  >\n                    <Edit3 />\n                  </Button>\n                  <Button\n                    variant=\"danger\"\n                    size=\"icon\"\n                    onClick={() => setHeroImage(null)}\n                    title=\"Remove hero image\"\n                  >\n                    <Trash2 />\n                  </Button>\n                </div>\n              </div>\n            ) : (\n              <button\n                type=\"button\"\n                onClick={() => setShowHeroImageModal(true)}\n                className=\"w-32 h-32 rounded-md border-2 border-dashed border-[var(--border-strong)] flex flex-col items-center justify-center gap-2 hover:border-brand-500 hover:bg-[var(--accent-secondary)]/30 transition-colors cursor-pointer\"\n              >\n                <ImagePlus className=\"size-6 text-[var(--text-muted)]\" />\n                <span className=\"text-xs text-[var(--text-tertiary)]\">\n                  Upload hero\n                </span>\n              </button>\n            )}\n            <ImageUploadModal\n              isOpen={showHeroImageModal}\n              onClose={() => setShowHeroImageModal(false)}\n              onSuccess={(result) => {\n                setHeroImage({\n                  url: result.url,\n                  type: 'image',\n                  alt: result.alt || title || 'Product image',\n                });\n              }}\n              title=\"Upload hero image\"\n              initialUrl={heroImage?.url}\n              initialAlt={heroImage?.alt}\n              aspectRatio={1}\n              accept=\"image/*\"\n            />\n          </div>\n\n          <div className=\"space-y-2\">\n            <div className=\"flex items-center justify-between gap-3\">\n              <label className=\"block text-sm font-medium text-[var(--text-secondary)]\">\n                Gallery\n              </label>\n              <span className=\"text-xs text-[var(--text-muted)]\">\n                {galleryItems.length}/{MAX_GALLERY_ITEMS}\n              </span>\n            </div>\n\n            <DndContext\n              sensors={gallerySensors}\n              collisionDetection={closestCenter}\n              onDragEnd={handleGalleryDragEnd}\n            >\n              <SortableContext\n                items={galleryItems.map((item) => item.id)}\n                strategy={horizontalListSortingStrategy}\n              >\n                <div className=\"flex gap-3 overflow-x-auto pb-2\">\n                  {galleryItems.map((item, index) => (\n                    <SortableGalleryItem\n                      key={item.id}\n                      item={item}\n                      index={index}\n                      onEdit={(itemIndex) => {\n                        setEditingGalleryIndex(itemIndex);\n                        setShowGalleryMediaModal(true);\n                      }}\n                      onRemove={(itemIndex) => {\n                        setGalleryItems((previous) =>\n                          previous.filter((_, index) => index !== itemIndex),\n                        );\n                      }}\n                      onSetAsHero={(itemIndex) => {\n                        const candidate = galleryItems[itemIndex];\n                        if (!candidate || candidate.type === 'video') return;\n                        setHeroImage({ ...candidate, type: 'image' });\n                      }}\n                      disabledSetAsHero={false}\n                    />\n                  ))}\n\n                  {galleryItems.length < MAX_GALLERY_ITEMS && (\n                    <button\n                      type=\"button\"\n                      onClick={() => {\n                        setEditingGalleryIndex(null);\n                        setShowGalleryMediaModal(true);\n                      }}\n                      className=\"w-28 h-28 rounded-md border-2 border-dashed border-[var(--border-strong)] flex flex-col items-center justify-center gap-2 hover:border-brand-500 hover:bg-[var(--accent-secondary)]/30 transition-colors cursor-pointer shrink-0\"\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                    </button>\n                  )}\n                </div>\n              </SortableContext>\n            </DndContext>\n\n            <p className=\"text-xs text-[var(--text-muted)]\">\n              Drag to reorder. Videos are allowed in gallery. Hero must be an\n              image.\n            </p>\n\n            <ImageUploadModal\n              isOpen={showGalleryMediaModal}\n              onClose={() => {\n                setShowGalleryMediaModal(false);\n                setEditingGalleryIndex(null);\n              }}\n              onSuccess={(result) => {\n                const nextItem: ProductGalleryItem = {\n                  id: createGalleryItemId(result.url),\n                  url: result.url,\n                  type: result.resourceType === 'video' ? 'video' : 'image',\n                  alt: result.alt,\n                  width: result.width,\n                  height: result.height,\n                  thumbnail: result.thumbnail,\n                  duration: result.duration,\n                };\n\n                setGalleryItems((previous) => {\n                  if (\n                    editingGalleryIndex !== null &&\n                    editingGalleryIndex >= 0 &&\n                    editingGalleryIndex < previous.length\n                  ) {\n                    const next = [...previous];\n                    next[editingGalleryIndex] = {\n                      ...nextItem,\n                      id: previous[editingGalleryIndex].id,\n                    };\n                    return next;\n                  }\n\n                  if (previous.length >= MAX_GALLERY_ITEMS) return previous;\n                  return [...previous, nextItem];\n                });\n\n                setShowGalleryMediaModal(false);\n                setEditingGalleryIndex(null);\n              }}\n              title={\n                editingGalleryIndex !== null\n                  ? 'Replace Gallery Media'\n                  : 'Add Gallery Media'\n              }\n              initialUrl={\n                editingGalleryIndex !== null\n                  ? galleryItems[editingGalleryIndex]?.url\n                  : undefined\n              }\n              initialAlt={\n                editingGalleryIndex !== null\n                  ? galleryItems[editingGalleryIndex]?.alt\n                  : undefined\n              }\n              accept=\"image/*,video/mp4,video/quicktime,video/webm\"\n            />\n          </div>\n\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Description\n            </label>\n            <Textarea\n              value={description}\n              onChange={(event) => setDescription(event.target.value)}\n              rows={3}\n              placeholder=\"Product description…\"\n            />\n          </div>\n        </fieldset>\n\n        <fieldset className=\"space-y-4\">\n          <legend className=\"text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider\">\n            Pricing\n          </legend>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <CurrencyField\n              label={`Price (${currencySymbol})`}\n              currencySymbol={currencySymbol}\n              focused={priceFocused}\n              setFocused={setPriceFocused}\n              display={priceDisplay}\n              setDisplay={setPriceDisplay}\n              value={price}\n              setValue={setPrice}\n              formatCurrency={formatCurrency}\n              parseCurrency={parseCurrency}\n            />\n            <CurrencyField\n              label=\"Compare at price\"\n              currencySymbol={currencySymbol}\n              focused={compareFocused}\n              setFocused={setCompareFocused}\n              display={compareDisplay}\n              setDisplay={setCompareDisplay}\n              value={compareAtPrice}\n              setValue={setCompareAtPrice}\n              formatCurrency={formatCurrency}\n              parseCurrency={parseCurrency}\n            />\n          </div>\n        </fieldset>\n      </div>\n    ),\n    validate: () => (title.trim() ? true : 'Please enter a title.'),\n  };\n}\n\nfunction SortableGalleryItem({\n  item,\n  index,\n  onEdit,\n  onRemove,\n  onSetAsHero,\n  disabledSetAsHero,\n}: {\n  item: ProductGalleryItem;\n  index: number;\n  onEdit: (index: number) => void;\n  onRemove: (index: number) => void;\n  onSetAsHero: (index: number) => void;\n  disabledSetAsHero: boolean;\n}) {\n  const { attributes, listeners, setNodeRef, transform, transition } =\n    useSortable({ id: item.id });\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition,\n      }}\n      className=\"relative w-28 h-28 rounded-md overflow-hidden border border-[var(--border-default)] bg-[var(--bg-muted)] shrink-0\"\n    >\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img\n        src={item.type === 'video' ? item.thumbnail || item.url : item.url}\n        alt={item.alt || `Gallery item ${index + 1}`}\n        className=\"w-full h-full object-cover\"\n      />\n      {item.type === 'video' && (\n        <div className=\"absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-black/70 text-white text-3xs flex items-center justify-center\">\n          <Play />\n        </div>\n      )}\n      <button\n        type=\"button\"\n        {...attributes}\n        {...listeners}\n        className=\"absolute top-1.5 left-1.5 w-5 h-5 rounded-full bg-black/70 text-white flex items-center justify-center cursor-grab active:cursor-grabbing\"\n        title=\"Drag to reorder\"\n      >\n        <GripVertical />\n      </button>\n      <div className=\"absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/80 to-black/0 text-white flex items-center justify-between gap-1\">\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"text-3xs\"\n          onClick={() => onSetAsHero(index)}\n          disabled={disabledSetAsHero || item.type === 'video'}\n          title={\n            item.type === 'video' ? 'Hero must be an image' : 'Set as hero'\n          }\n        >\n          Hero\n        </Button>\n        <div className=\"flex items-center gap-1\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"text-3xs\"\n            onClick={() => onEdit(index)}\n            title=\"Edit media\"\n          >\n            Edit\n          </Button>\n          <Button\n            variant=\"danger\"\n            size=\"sm\"\n            className=\"text-3xs\"\n            onClick={() => onRemove(index)}\n            title=\"Remove media\"\n          >\n            Remove\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["index"]}

package/dist/features/product-form/behaviors-step.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { type BehaviorKey, type BehaviorLabelOverrides } from '@withpotter/components/behaviors/behavior-config-section';
+import type { FormStep } from '@withpotter/ui-kit/form-stepper-panel';
+import type { MerchantPlan } from '@withpotter/lib/api/types';
+import type { ContentResourceRequirementItem } from '@withpotter/lib/resource-types';
+import { type BookableConfig, type DownloadableConfig, type ProductBehaviors, type RentableConfig, type ShippableConfig, type SubscribableConfig, type TicketedConfig } from '@withpotter/lib/product-types';
+interface BehaviorsStepProps {
+    behaviorConfigs: ProductBehaviors;
+    setBehaviorConfigs: (behaviors: ProductBehaviors) => void;
+    behaviorLabelOverrides?: BehaviorLabelOverrides;
+    availableBehaviors: BehaviorKey[];
+    behaviorConfigPanels: Partial<Record<BehaviorKey, ReactNode>>;
+    gatedBy: string[];
+    setGatedBy: (tags: string[]) => void;
+    gatedByPlanIds: string[];
+    setGatedByPlanIds: (ids: string[]) => void;
+    activePlans: MerchantPlan[];
+    linkedPlanName?: string;
+}
+interface BehaviorConfigPanelsProps {
+    behaviorConfigs: ProductBehaviors;
+    updateBookableConfig: (config: BookableConfig) => void;
+    updateShippableConfig: (config: ShippableConfig) => void;
+    updateSubscribableConfig: (config: SubscribableConfig) => void;
+    updateDownloadableConfig: (config: DownloadableConfig) => void;
+    updateRentableConfig: (config: RentableConfig) => void;
+    updateTicketedConfig: (config: TicketedConfig) => void;
+    behaviorLabelOverrides?: BehaviorLabelOverrides;
+    currencySymbol: string;
+    resourceCategories: Array<{
+        id: string;
+        label: string;
+        labelPlural: string;
+        kind: string;
+    }>;
+    resourceRequirements: ContentResourceRequirementItem[];
+    setResourceRequirements: (items: ContentResourceRequirementItem[]) => void;
+    activePlans: MerchantPlan[];
+}
+export declare function createBehaviorConfigPanels({ behaviorConfigs, updateBookableConfig, updateShippableConfig, updateSubscribableConfig, updateDownloadableConfig, updateRentableConfig, updateTicketedConfig, behaviorLabelOverrides, currencySymbol, resourceCategories, resourceRequirements, setResourceRequirements, activePlans, }: BehaviorConfigPanelsProps): Partial<Record<BehaviorKey, ReactNode>>;
+export declare function createBehaviorsStep({ behaviorConfigs, setBehaviorConfigs, behaviorLabelOverrides, availableBehaviors, behaviorConfigPanels, gatedBy, setGatedBy, gatedByPlanIds, setGatedByPlanIds, activePlans, linkedPlanName, }: BehaviorsStepProps): FormStep;
+export {};

package/dist/features/product-form/behaviors-step.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BookableConfigPanel } from "@withpotter/components/behaviors/bookable-config-panel";
+import {
+  BehaviorConfigSection
+} from "@withpotter/components/behaviors/behavior-config-section";
+import { DownloadableConfigPanel } from "@withpotter/components/behaviors/downloadable-config-panel";
+import { GatingConfigSection } from "@withpotter/components/behaviors/gating-config-section";
+import { RentableConfigPanel } from "@withpotter/components/behaviors/rentable-config-panel";
+import { ShippableConfigPanel } from "@withpotter/components/behaviors/shippable-config-panel";
+import { SubscribableConfigPanel } from "@withpotter/components/behaviors/subscribable-config-panel";
+import { TicketedConfigPanel } from "@withpotter/components/behaviors/ticketed-config-panel";
+import {
+  getBehaviorConfig,
+  isBehaviorEnabled
+} from "@withpotter/lib/product-types";
+function createBehaviorConfigPanels({
+  behaviorConfigs,
+  updateBookableConfig,
+  updateShippableConfig,
+  updateSubscribableConfig,
+  updateDownloadableConfig,
+  updateRentableConfig,
+  updateTicketedConfig,
+  behaviorLabelOverrides,
+  currencySymbol,
+  resourceCategories,
+  resourceRequirements,
+  setResourceRequirements,
+  activePlans
+}) {
+  const panels = {};
+  const bookableVal = behaviorConfigs.bookable;
+  if (isBehaviorEnabled(bookableVal)) {
+    const config = getBehaviorConfig(bookableVal) || {
+      enabled: true
+    };
+    panels.bookable = /* @__PURE__ */ jsx(
+      BookableConfigPanel,
+      {
+        config,
+        onChange: updateBookableConfig,
+        labelOverrides: behaviorLabelOverrides?.bookable,
+        resourceCategories,
+        resourceRequirements,
+        onResourceRequirementsChange: setResourceRequirements
+      }
+    );
+  }
+  const shippableVal = behaviorConfigs.shippable;
+  if (isBehaviorEnabled(shippableVal)) {
+    const config = getBehaviorConfig(shippableVal) || {
+      enabled: true
+    };
+    panels.shippable = /* @__PURE__ */ jsx(
+      ShippableConfigPanel,
+      {
+        config,
+        onChange: updateShippableConfig,
+        labelOverrides: behaviorLabelOverrides?.shippable
+      }
+    );
+  }
+  const subscribableVal = behaviorConfigs.subscribable;
+  if (isBehaviorEnabled(subscribableVal)) {
+    const config = getBehaviorConfig(subscribableVal) || {
+      enabled: true
+    };
+    panels.subscribable = /* @__PURE__ */ jsx(
+      SubscribableConfigPanel,
+      {
+        config,
+        onChange: updateSubscribableConfig,
+        labelOverrides: behaviorLabelOverrides?.subscribable,
+        plans: activePlans
+      }
+    );
+  }
+  const downloadableVal = behaviorConfigs.downloadable;
+  if (isBehaviorEnabled(downloadableVal)) {
+    const config = getBehaviorConfig(downloadableVal) || {
+      enabled: true
+    };
+    panels.downloadable = /* @__PURE__ */ jsx(
+      DownloadableConfigPanel,
+      {
+        config,
+        onChange: updateDownloadableConfig,
+        labelOverrides: behaviorLabelOverrides?.downloadable
+      }
+    );
+  }
+  const rentableVal = behaviorConfigs.rentable;
+  if (isBehaviorEnabled(rentableVal)) {
+    const config = getBehaviorConfig(rentableVal) || {
+      enabled: true
+    };
+    panels.rentable = /* @__PURE__ */ jsx(
+      RentableConfigPanel,
+      {
+        config,
+        onChange: updateRentableConfig,
+        labelOverrides: behaviorLabelOverrides?.rentable,
+        currencySymbol
+      }
+    );
+  }
+  const ticketedVal = behaviorConfigs.ticketed;
+  if (isBehaviorEnabled(ticketedVal)) {
+    const config = getBehaviorConfig(ticketedVal) || {
+      enabled: true
+    };
+    panels.ticketed = /* @__PURE__ */ jsx(
+      TicketedConfigPanel,
+      {
+        config,
+        onChange: updateTicketedConfig,
+        labelOverrides: behaviorLabelOverrides?.ticketed,
+        currencySymbol
+      }
+    );
+  }
+  return panels;
+}
+function createBehaviorsStep({
+  behaviorConfigs,
+  setBehaviorConfigs,
+  behaviorLabelOverrides,
+  availableBehaviors,
+  behaviorConfigPanels,
+  gatedBy,
+  setGatedBy,
+  gatedByPlanIds,
+  setGatedByPlanIds,
+  activePlans,
+  linkedPlanName
+}) {
+  return {
+    key: "behaviors",
+    label: "Behaviors",
+    description: "What can customers do with this product?",
+    content: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(
+        BehaviorConfigSection,
+        {
+          behaviors: behaviorConfigs,
+          onChange: setBehaviorConfigs,
+          labelOverrides: behaviorLabelOverrides,
+          availableBehaviors,
+          configPanels: behaviorConfigPanels
+        }
+      ),
+      /* @__PURE__ */ jsxs("fieldset", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("legend", { className: "text-sm font-semibold text-[var(--text-primary)] uppercase tracking-wider", children: "Access & gating" }),
+        /* @__PURE__ */ jsx(
+          GatingConfigSection,
+          {
+            gatedBy,
+            onChange: setGatedBy,
+            gatedByPlanIds,
+            onPlanIdsChange: setGatedByPlanIds,
+            availablePlans: activePlans,
+            subscribablePlanName: linkedPlanName
+          }
+        )
+      ] })
+    ] })
+  };
+}
+export {
+  createBehaviorConfigPanels,
+  createBehaviorsStep
+};
+//# sourceMappingURL=behaviors-step.js.map