@commercetools-demo/puck-editor 0.1.0

package/dist/index.mjs

@@ -0,0 +1,3238 @@
+// src/PuckEditor.tsx
+import { useCallback as useCallback2, useRef as useRef2, useState as useState5 } from "react";
+import { Puck } from "@measured/puck";
+import "@measured/puck/puck.css";
+import { PuckApiProvider } from "@commercetools-demo/puck-api";
+import { usePuckPage } from "@commercetools-demo/puck-api";
+
+// src/config/defaultPuckConfig.ts
+import React4 from "react";
+
+// src/components/Hero.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Hero = {
+  label: "Hero",
+  fields: {
+    heading: { type: "text", label: "Heading" },
+    subheading: { type: "textarea", label: "Subheading" },
+    backgroundImage: { type: "text", label: "Background Image URL" },
+    ctaText: { type: "text", label: "CTA Button Text" },
+    ctaUrl: { type: "text", label: "CTA Button URL" },
+    layout: {
+      type: "select",
+      label: "Layout",
+      options: [
+        { value: "centered", label: "Centered" },
+        { value: "left-aligned", label: "Left Aligned" }
+      ]
+    },
+    minHeight: { type: "text", label: "Min Height (CSS, e.g. 400px)" }
+  },
+  defaultProps: {
+    heading: "Welcome",
+    layout: "centered",
+    minHeight: "400px"
+  },
+  render: ({
+    heading,
+    subheading,
+    backgroundImage,
+    ctaText,
+    ctaUrl,
+    layout,
+    minHeight
+  }) => {
+    const isCenter = layout !== "left-aligned";
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        style: {
+          position: "relative",
+          minHeight: minHeight ?? "400px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: isCenter ? "center" : "flex-start",
+          padding: "48px 32px",
+          backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundColor: backgroundImage ? void 0 : "#1a1a2e",
+          color: "#fff",
+          boxSizing: "border-box"
+        },
+        children: [
+          backgroundImage && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                background: "rgba(0,0,0,0.45)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "relative",
+                maxWidth: "720px",
+                textAlign: isCenter ? "center" : "left"
+              },
+              children: [
+                /* @__PURE__ */ jsx("h1", { style: { margin: "0 0 16px", fontSize: "2.5rem", fontWeight: 700 }, children: heading }),
+                subheading && /* @__PURE__ */ jsx("p", { style: { margin: "0 0 24px", fontSize: "1.2rem", opacity: 0.85 }, children: subheading }),
+                ctaText && ctaUrl && /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: ctaUrl,
+                    style: {
+                      display: "inline-block",
+                      padding: "12px 28px",
+                      background: "#e94560",
+                      color: "#fff",
+                      borderRadius: "4px",
+                      textDecoration: "none",
+                      fontWeight: 600
+                    },
+                    children: ctaText
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+
+// src/components/RichText.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var RichText = {
+  label: "Rich Text",
+  fields: {
+    content: {
+      type: "textarea",
+      label: "Content (HTML supported)"
+    },
+    align: {
+      type: "select",
+      label: "Text Alignment",
+      options: [
+        { value: "left", label: "Left" },
+        { value: "center", label: "Center" },
+        { value: "right", label: "Right" }
+      ]
+    },
+    maxWidth: { type: "text", label: "Max Width (CSS)" },
+    padding: { type: "text", label: "Padding (CSS)" }
+  },
+  defaultProps: {
+    content: "<p>Add your content here\u2026</p>",
+    align: "left",
+    padding: "32px"
+  },
+  render: ({ content, align, maxWidth, padding }) => /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        padding: padding ?? "32px",
+        textAlign: align ?? "left",
+        maxWidth,
+        margin: maxWidth ? "0 auto" : void 0,
+        boxSizing: "border-box"
+      },
+      dangerouslySetInnerHTML: { __html: content }
+    }
+  )
+};
+
+// src/components/Columns.tsx
+import { DropZone } from "@measured/puck";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Columns = {
+  label: "Columns",
+  fields: {
+    columnCount: {
+      type: "select",
+      label: "Number of Columns",
+      options: [
+        { value: 2, label: "2 Columns" },
+        { value: 3, label: "3 Columns" },
+        { value: 4, label: "4 Columns" }
+      ]
+    },
+    gap: { type: "text", label: "Column Gap (CSS)" },
+    padding: { type: "text", label: "Padding (CSS)" }
+  },
+  defaultProps: {
+    columnCount: 2,
+    gap: "16px",
+    padding: "16px"
+  },
+  render: ({ columnCount = 2, gap = "16px", padding = "16px" }) => {
+    const cols = Array.from({ length: columnCount }, (_, i) => i);
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
+          gap,
+          padding,
+          boxSizing: "border-box"
+        },
+        children: cols.map((i) => /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(DropZone, { zone: `column-${i}` }) }, i))
+      }
+    );
+  }
+};
+
+// src/fields/ImagePickerField.tsx
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { useMediaLibrary } from "@commercetools-demo/puck-api";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var s = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    fontFamily: "inherit",
+    fontSize: "13px"
+  },
+  preview: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: "8px",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px",
+    background: "#f9fafb"
+  },
+  previewImg: {
+    width: "48px",
+    height: "48px",
+    objectFit: "cover",
+    borderRadius: "4px",
+    flexShrink: 0
+  },
+  previewInfo: { flex: 1, minWidth: 0 },
+  previewUrl: {
+    fontSize: "12px",
+    color: "#374151",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  btnRow: { display: "flex", gap: "6px", flexWrap: "wrap" },
+  btn: (primary) => ({
+    padding: "5px 12px",
+    borderRadius: "4px",
+    border: primary ? "none" : "1px solid #d1d5db",
+    background: primary ? "#1a1a2e" : "#fff",
+    color: primary ? "#fff" : "#374151",
+    fontWeight: 500,
+    fontSize: "12px",
+    cursor: "pointer",
+    whiteSpace: "nowrap"
+  }),
+  dangerBtn: {
+    padding: "5px 12px",
+    borderRadius: "4px",
+    border: "1px solid #fca5a5",
+    background: "#fff",
+    color: "#dc2626",
+    fontWeight: 500,
+    fontSize: "12px",
+    cursor: "pointer"
+  },
+  // Modal
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0,0,0,0.5)",
+    zIndex: 9999,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  modal: {
+    background: "#fff",
+    borderRadius: "8px",
+    width: "640px",
+    maxWidth: "95vw",
+    maxHeight: "85vh",
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 20px 60px rgba(0,0,0,0.3)"
+  },
+  modalHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "16px 20px",
+    borderBottom: "1px solid #e5e7eb"
+  },
+  modalTitle: { margin: 0, fontSize: "16px", fontWeight: 600 },
+  modalClose: {
+    background: "none",
+    border: "none",
+    fontSize: "20px",
+    cursor: "pointer",
+    color: "#6b7280",
+    lineHeight: 1
+  },
+  modalBody: {
+    flex: 1,
+    overflow: "auto",
+    padding: "20px"
+  },
+  modalFooter: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "12px 20px",
+    borderTop: "1px solid #e5e7eb",
+    gap: "12px"
+  },
+  // Upload form
+  formGroup: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    marginBottom: "12px"
+  },
+  label: { fontSize: "12px", fontWeight: 600, color: "#374151" },
+  input: {
+    padding: "7px 10px",
+    border: "1px solid #d1d5db",
+    borderRadius: "4px",
+    fontSize: "13px",
+    width: "100%",
+    boxSizing: "border-box"
+  },
+  dropZone: {
+    border: "2px dashed #d1d5db",
+    borderRadius: "6px",
+    padding: "24px",
+    textAlign: "center",
+    cursor: "pointer",
+    color: "#6b7280",
+    fontSize: "13px",
+    transition: "border-color .2s"
+  },
+  dropZoneActive: {
+    border: "2px dashed #3b82f6",
+    borderRadius: "6px",
+    padding: "24px",
+    textAlign: "center",
+    cursor: "pointer",
+    color: "#3b82f6",
+    fontSize: "13px"
+  },
+  // Media grid
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
+    gap: "12px",
+    marginTop: "4px"
+  },
+  gridItem: (selected) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    cursor: "pointer",
+    border: `2px solid ${selected ? "#3b82f6" : "transparent"}`,
+    borderRadius: "6px",
+    padding: "6px",
+    background: selected ? "rgba(59,130,246,0.07)" : "#f9fafb"
+  }),
+  thumb: {
+    width: "80px",
+    height: "80px",
+    objectFit: "cover",
+    borderRadius: "4px",
+    background: "#e5e7eb"
+  },
+  thumbPlaceholder: {
+    width: "80px",
+    height: "80px",
+    borderRadius: "4px",
+    background: "#e5e7eb",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "28px"
+  },
+  itemName: {
+    marginTop: "6px",
+    fontSize: "11px",
+    textAlign: "center",
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: "#374151"
+  },
+  pagination: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "12px",
+    marginTop: "16px",
+    fontSize: "12px",
+    color: "#6b7280"
+  },
+  errorMsg: {
+    fontSize: "12px",
+    color: "#dc2626",
+    marginTop: "4px"
+  },
+  selectedInfo: {
+    flex: 1,
+    fontSize: "12px",
+    color: "#374151",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }
+};
+var UploadModal = ({
+  uploading,
+  error,
+  onUpload,
+  onClose
+}) => {
+  const [file, setFile] = useState(null);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef(null);
+  const handleFile = (f) => {
+    setFile(f);
+    if (!title) setTitle(f.name);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setDragging(false);
+    const f = e.dataTransfer.files[0];
+    if (f) handleFile(f);
+  };
+  return /* @__PURE__ */ jsx4("div", { style: s.overlay, onClick: (e) => e.target === e.currentTarget && onClose(), children: /* @__PURE__ */ jsxs2("div", { style: s.modal, children: [
+    /* @__PURE__ */ jsxs2("div", { style: s.modalHeader, children: [
+      /* @__PURE__ */ jsx4("h3", { style: s.modalTitle, children: "Upload a file" }),
+      /* @__PURE__ */ jsx4("button", { style: s.modalClose, onClick: onClose, children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { style: s.modalBody, children: [
+      /* @__PURE__ */ jsxs2("div", { style: s.formGroup, children: [
+        /* @__PURE__ */ jsx4("label", { style: s.label, children: "Title" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            style: s.input,
+            value: title,
+            onChange: (e) => setTitle(e.target.value),
+            placeholder: "File title"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { style: s.formGroup, children: [
+        /* @__PURE__ */ jsx4("label", { style: s.label, children: "Description" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            style: s.input,
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            placeholder: "Optional description"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: dragging ? s.dropZoneActive : s.dropZone,
+          onClick: () => inputRef.current?.click(),
+          onDragOver: (e) => {
+            e.preventDefault();
+            setDragging(true);
+          },
+          onDragLeave: () => setDragging(false),
+          onDrop: handleDrop,
+          children: [
+            file ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsxs2("div", { children: [
+                "\u{1F4CE} ",
+                file.name
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { style: { fontSize: "11px", marginTop: "4px", color: "#9ca3af" }, children: [
+                (file.size / 1024).toFixed(0),
+                " KB"
+              ] })
+            ] }) : /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsx4("div", { children: "\u{1F4C1} Click or drag & drop to select a file" }) }),
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                ref: inputRef,
+                type: "file",
+                accept: "image/*",
+                style: { display: "none" },
+                onChange: (e) => {
+                  const f = e.target.files?.[0];
+                  if (f) handleFile(f);
+                }
+              }
+            )
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx4("div", { style: s.errorMsg, children: error })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { style: s.modalFooter, children: [
+      /* @__PURE__ */ jsx4("span", { style: s.selectedInfo, children: file?.name ?? "No file selected" }),
+      /* @__PURE__ */ jsxs2("div", { style: s.btnRow, children: [
+        /* @__PURE__ */ jsx4("button", { style: s.btn(), onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            style: s.btn(true),
+            disabled: !file || uploading,
+            onClick: () => file && onUpload(file, title, description),
+            children: uploading ? "Uploading\u2026" : "Upload"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+var LibraryModal = ({
+  files,
+  pagination,
+  loading,
+  error,
+  onNextPage,
+  onPrevPage,
+  onSelect,
+  onClose
+}) => {
+  const [selected, setSelected] = useState(null);
+  const handleConfirm = () => {
+    if (selected) onSelect(selected);
+  };
+  return /* @__PURE__ */ jsx4("div", { style: s.overlay, onClick: (e) => e.target === e.currentTarget && onClose(), children: /* @__PURE__ */ jsxs2("div", { style: s.modal, children: [
+    /* @__PURE__ */ jsxs2("div", { style: s.modalHeader, children: [
+      /* @__PURE__ */ jsx4("h3", { style: s.modalTitle, children: "Select from Media Library" }),
+      /* @__PURE__ */ jsx4("button", { style: s.modalClose, onClick: onClose, children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { style: s.modalBody, children: [
+      loading ? /* @__PURE__ */ jsx4("div", { style: { color: "#6b7280", fontSize: "13px" }, children: "Loading\u2026" }) : files.length === 0 ? /* @__PURE__ */ jsx4("div", { style: { color: "#6b7280", fontSize: "13px" }, children: "No files found." }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx4("div", { style: s.grid, children: files.map((file) => /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: s.gridItem(selected?.url === file.url),
+            onClick: () => setSelected(file),
+            title: file.title ?? file.name,
+            children: [
+              file.isImage ? /* @__PURE__ */ jsx4("img", { src: file.url, alt: file.name, style: s.thumb }) : /* @__PURE__ */ jsx4("div", { style: s.thumbPlaceholder, children: "\u{1F4C4}" }),
+              /* @__PURE__ */ jsx4("div", { style: s.itemName, children: file.title ?? file.name })
+            ]
+          },
+          file.url
+        )) }),
+        pagination.totalPages > 1 && /* @__PURE__ */ jsxs2("div", { style: s.pagination, children: [
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              style: s.btn(),
+              disabled: pagination.currentPage <= 1,
+              onClick: onPrevPage,
+              children: "\u2190 Prev"
+            }
+          ),
+          /* @__PURE__ */ jsxs2("span", { children: [
+            pagination.currentPage,
+            " / ",
+            pagination.totalPages
+          ] }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              style: s.btn(),
+              disabled: pagination.currentPage >= pagination.totalPages,
+              onClick: onNextPage,
+              children: "Next \u2192"
+            }
+          )
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx4("div", { style: s.errorMsg, children: error })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { style: s.modalFooter, children: [
+      /* @__PURE__ */ jsx4("span", { style: s.selectedInfo, children: selected ? selected.title ?? selected.name : "Nothing selected" }),
+      /* @__PURE__ */ jsxs2("div", { style: s.btnRow, children: [
+        /* @__PURE__ */ jsx4("button", { style: s.btn(), onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            style: s.btn(true),
+            disabled: !selected,
+            onClick: handleConfirm,
+            children: "Select"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+var ImagePickerField = ({
+  value,
+  onChange,
+  imagesOnly = true
+}) => {
+  const {
+    files,
+    pagination,
+    loading,
+    uploading,
+    error,
+    fetchMedia,
+    uploadFile,
+    loadNextPage,
+    loadPreviousPage
+  } = useMediaLibrary();
+  const [showUpload, setShowUpload] = useState(false);
+  const [showLibrary, setShowLibrary] = useState(false);
+  const extensions = imagesOnly ? ["jpg", "jpeg", "png", "gif", "webp", "svg"] : [];
+  const openLibrary = useCallback(() => {
+    void fetchMedia(extensions, 1, 20);
+    setShowLibrary(true);
+  }, [fetchMedia, extensions]);
+  const handleUpload = useCallback(
+    async (file, title, description) => {
+      const mediaFile = await uploadFile(file, title, description);
+      onChange(mediaFile.url);
+      setShowUpload(false);
+    },
+    [uploadFile, onChange]
+  );
+  const handleSelect = useCallback(
+    (file) => {
+      onChange(file.url);
+      setShowLibrary(false);
+    },
+    [onChange]
+  );
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        setShowUpload(false);
+        setShowLibrary(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  return /* @__PURE__ */ jsxs2("div", { style: s.root, children: [
+    value ? /* @__PURE__ */ jsxs2("div", { style: s.preview, children: [
+      /* @__PURE__ */ jsx4("img", { src: value, alt: "", style: s.previewImg }),
+      /* @__PURE__ */ jsx4("div", { style: s.previewInfo, children: /* @__PURE__ */ jsx4("div", { style: s.previewUrl, children: value }) }),
+      /* @__PURE__ */ jsx4("button", { style: s.dangerBtn, onClick: () => onChange(""), children: "Remove" })
+    ] }) : /* @__PURE__ */ jsx4("div", { style: { color: "#9ca3af", fontSize: "12px", padding: "4px 0" }, children: "No image selected" }),
+    /* @__PURE__ */ jsxs2("div", { style: s.btnRow, children: [
+      /* @__PURE__ */ jsx4("button", { style: s.btn(), onClick: () => setShowUpload(true), children: "Upload" }),
+      /* @__PURE__ */ jsx4("button", { style: s.btn(true), onClick: openLibrary, children: "Media Library" })
+    ] }),
+    showUpload && /* @__PURE__ */ jsx4(
+      UploadModal,
+      {
+        uploading,
+        error,
+        onUpload: (file, title, desc) => void handleUpload(file, title, desc),
+        onClose: () => setShowUpload(false)
+      }
+    ),
+    showLibrary && /* @__PURE__ */ jsx4(
+      LibraryModal,
+      {
+        files,
+        pagination,
+        loading,
+        error,
+        onNextPage: () => void loadNextPage(extensions),
+        onPrevPage: () => void loadPreviousPage(extensions),
+        onSelect: handleSelect,
+        onClose: () => setShowLibrary(false)
+      }
+    )
+  ] });
+};
+
+// src/components/Image.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Image = {
+  label: "Image",
+  fields: {
+    src: {
+      type: "custom",
+      label: "Image",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx5(
+        ImagePickerField,
+        {
+          value,
+          onChange,
+          imagesOnly: true
+        }
+      )
+    },
+    alt: { type: "text", label: "Alt Text" },
+    caption: { type: "text", label: "Caption" },
+    width: { type: "text", label: "Width (CSS, e.g. 100%)" },
+    height: { type: "text", label: "Height (CSS, e.g. 300px)" },
+    objectFit: {
+      type: "select",
+      label: "Object Fit",
+      options: [
+        { value: "cover", label: "Cover" },
+        { value: "contain", label: "Contain" },
+        { value: "fill", label: "Fill" }
+      ]
+    },
+    borderRadius: { type: "text", label: "Border Radius (CSS)" },
+    align: {
+      type: "select",
+      label: "Alignment",
+      options: [
+        { value: "left", label: "Left" },
+        { value: "center", label: "Center" },
+        { value: "right", label: "Right" }
+      ]
+    }
+  },
+  defaultProps: {
+    src: "",
+    alt: "",
+    width: "100%",
+    objectFit: "cover",
+    align: "center"
+  },
+  render: ({ src, alt, caption, width, height, objectFit, borderRadius, align }) => /* @__PURE__ */ jsxs3(
+    "figure",
+    {
+      style: {
+        margin: 0,
+        padding: "16px",
+        textAlign: align ?? "center",
+        boxSizing: "border-box"
+      },
+      children: [
+        src ? /* @__PURE__ */ jsx5(
+          "img",
+          {
+            src,
+            alt: alt ?? "",
+            style: {
+              width: width ?? "100%",
+              height,
+              objectFit: objectFit ?? "cover",
+              borderRadius,
+              display: "inline-block",
+              maxWidth: "100%"
+            }
+          }
+        ) : /* @__PURE__ */ jsx5(
+          "div",
+          {
+            style: {
+              width: width ?? "100%",
+              height: height ?? "200px",
+              background: "#e0e0e0",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#888",
+              fontSize: "14px",
+              borderRadius
+            },
+            children: "No image selected"
+          }
+        ),
+        caption && /* @__PURE__ */ jsx5(
+          "figcaption",
+          {
+            style: { marginTop: "8px", fontSize: "14px", color: "#666" },
+            children: caption
+          }
+        )
+      ]
+    }
+  )
+};
+
+// src/components/Button.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var VARIANT_STYLES = {
+  primary: { background: "#1a1a2e", color: "#fff", border: "2px solid #1a1a2e" },
+  secondary: { background: "#e94560", color: "#fff", border: "2px solid #e94560" },
+  outline: { background: "transparent", color: "#1a1a2e", border: "2px solid #1a1a2e" }
+};
+var SIZE_STYLES = {
+  sm: { padding: "6px 16px", fontSize: "14px" },
+  md: { padding: "10px 24px", fontSize: "16px" },
+  lg: { padding: "14px 32px", fontSize: "18px" }
+};
+var Button = {
+  label: "Button",
+  fields: {
+    label: { type: "text", label: "Button Label" },
+    href: { type: "text", label: "Link URL" },
+    variant: {
+      type: "select",
+      label: "Variant",
+      options: [
+        { value: "primary", label: "Primary" },
+        { value: "secondary", label: "Secondary" },
+        { value: "outline", label: "Outline" }
+      ]
+    },
+    size: {
+      type: "select",
+      label: "Size",
+      options: [
+        { value: "sm", label: "Small" },
+        { value: "md", label: "Medium" },
+        { value: "lg", label: "Large" }
+      ]
+    },
+    align: {
+      type: "select",
+      label: "Alignment",
+      options: [
+        { value: "left", label: "Left" },
+        { value: "center", label: "Center" },
+        { value: "right", label: "Right" }
+      ]
+    },
+    openInNewTab: { type: "radio", label: "Open in New Tab", options: [
+      { value: true, label: "Yes" },
+      { value: false, label: "No" }
+    ] }
+  },
+  defaultProps: {
+    label: "Click me",
+    variant: "primary",
+    size: "md",
+    align: "left",
+    openInNewTab: false
+  },
+  render: ({ label, href, variant = "primary", size = "md", align = "left", openInNewTab }) => /* @__PURE__ */ jsx6("div", { style: { padding: "12px 16px", textAlign: align, boxSizing: "border-box" }, children: /* @__PURE__ */ jsx6(
+    "a",
+    {
+      href: href ?? "#",
+      target: openInNewTab ? "_blank" : void 0,
+      rel: openInNewTab ? "noopener noreferrer" : void 0,
+      style: {
+        display: "inline-block",
+        borderRadius: "4px",
+        textDecoration: "none",
+        fontWeight: 600,
+        cursor: "pointer",
+        ...VARIANT_STYLES[variant],
+        ...SIZE_STYLES[size]
+      },
+      children: label
+    }
+  ) })
+};
+
+// src/components/Card.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var Card = {
+  label: "Card",
+  fields: {
+    title: { type: "text", label: "Title" },
+    body: { type: "textarea", label: "Body Text" },
+    imageUrl: { type: "text", label: "Image URL" },
+    ctaText: { type: "text", label: "CTA Text" },
+    ctaUrl: { type: "text", label: "CTA URL" },
+    shadow: {
+      type: "radio",
+      label: "Drop Shadow",
+      options: [
+        { value: true, label: "Yes" },
+        { value: false, label: "No" }
+      ]
+    },
+    borderRadius: { type: "text", label: "Border Radius (CSS)" }
+  },
+  defaultProps: {
+    title: "Card Title",
+    body: "Card description goes here.",
+    shadow: true,
+    borderRadius: "8px"
+  },
+  render: ({ title, body, imageUrl, ctaText, ctaUrl, shadow, borderRadius }) => /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        border: "1px solid #e0e0e0",
+        borderRadius: borderRadius ?? "8px",
+        overflow: "hidden",
+        boxShadow: shadow ? "0 2px 8px rgba(0,0,0,0.12)" : void 0,
+        background: "#fff",
+        margin: "8px",
+        boxSizing: "border-box"
+      },
+      children: [
+        imageUrl && /* @__PURE__ */ jsx7(
+          "img",
+          {
+            src: imageUrl,
+            alt: title,
+            style: { width: "100%", height: "200px", objectFit: "cover", display: "block" }
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { style: { padding: "16px" }, children: [
+          /* @__PURE__ */ jsx7("h3", { style: { margin: "0 0 8px", fontSize: "1.1rem" }, children: title }),
+          body && /* @__PURE__ */ jsx7("p", { style: { margin: "0 0 16px", color: "#555", fontSize: "14px" }, children: body }),
+          ctaText && ctaUrl && /* @__PURE__ */ jsxs4(
+            "a",
+            {
+              href: ctaUrl,
+              style: {
+                color: "#e94560",
+                fontWeight: 600,
+                textDecoration: "none",
+                fontSize: "14px"
+              },
+              children: [
+                ctaText,
+                " \u2192"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  )
+};
+
+// src/components/Spacer.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Spacer = {
+  label: "Spacer",
+  fields: {
+    height: { type: "text", label: "Height (CSS, e.g. 48px)" },
+    showLine: {
+      type: "radio",
+      label: "Show Divider Line",
+      options: [
+        { value: true, label: "Yes" },
+        { value: false, label: "No" }
+      ]
+    },
+    lineColor: { type: "text", label: "Line Color (CSS color)" }
+  },
+  defaultProps: {
+    height: "48px",
+    showLine: false,
+    lineColor: "#e0e0e0"
+  },
+  render: ({ height = "48px", showLine = false, lineColor = "#e0e0e0" }) => /* @__PURE__ */ jsx8(
+    "div",
+    {
+      style: {
+        height,
+        display: "flex",
+        alignItems: "center",
+        padding: "0 16px",
+        boxSizing: "border-box"
+      },
+      children: showLine && /* @__PURE__ */ jsx8("hr", { style: { width: "100%", border: "none", borderTop: `1px solid ${lineColor}` } })
+    }
+  )
+};
+
+// src/components/ProductTeaser.tsx
+import { useDatasource } from "@commercetools-demo/puck-api";
+
+// src/fields/DatasourceField.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var s2 = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    fontFamily: "inherit",
+    fontSize: "13px"
+  },
+  label: { fontSize: "12px", fontWeight: 600, color: "#374151" },
+  select: {
+    width: "100%",
+    padding: "7px 10px",
+    border: "1px solid #d1d5db",
+    borderRadius: "4px",
+    fontSize: "13px",
+    background: "#fff",
+    boxSizing: "border-box"
+  },
+  skuRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px"
+  },
+  input: {
+    flex: 1,
+    padding: "7px 10px",
+    border: "1px solid #d1d5db",
+    borderRadius: "4px",
+    fontSize: "13px",
+    boxSizing: "border-box"
+  },
+  removeBtn: {
+    padding: "5px 8px",
+    border: "1px solid #fca5a5",
+    borderRadius: "4px",
+    background: "#fff",
+    color: "#dc2626",
+    fontWeight: 600,
+    fontSize: "13px",
+    cursor: "pointer",
+    lineHeight: 1,
+    flexShrink: 0
+  },
+  addBtn: {
+    padding: "5px 12px",
+    border: "1px solid #d1d5db",
+    borderRadius: "4px",
+    background: "#fff",
+    color: "#374151",
+    fontWeight: 500,
+    fontSize: "12px",
+    cursor: "pointer",
+    alignSelf: "flex-start"
+  },
+  skuList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px"
+  }
+};
+var EMPTY_VALUE = { type: "product-by-sku", skus: [""] };
+var DatasourceField = ({
+  value,
+  onChange
+}) => {
+  const current = value ?? EMPTY_VALUE;
+  const handleTypeChange = (e) => {
+    const newType = e.target.value;
+    onChange({ type: newType, skus: newType === "product-by-sku" ? [current.skus[0] ?? ""] : current.skus });
+  };
+  const handleSingleSkuChange = (e) => {
+    onChange({ ...current, skus: [e.target.value] });
+  };
+  const handleMultiSkuChange = (index, val) => {
+    const updated = [...current.skus];
+    updated[index] = val;
+    onChange({ ...current, skus: updated });
+  };
+  const addSku = () => {
+    onChange({ ...current, skus: [...current.skus, ""] });
+  };
+  const removeSku = (index) => {
+    const updated = current.skus.filter((_, i) => i !== index);
+    onChange({ ...current, skus: updated.length > 0 ? updated : [""] });
+  };
+  return /* @__PURE__ */ jsxs5("div", { style: s2.root, children: [
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx9("div", { style: s2.label, children: "Datasource type" }),
+      /* @__PURE__ */ jsxs5("select", { style: s2.select, value: current.type, onChange: handleTypeChange, children: [
+        /* @__PURE__ */ jsx9("option", { value: "product-by-sku", children: "Product by SKU" }),
+        /* @__PURE__ */ jsx9("option", { value: "products-by-sku", children: "Products by SKU" })
+      ] })
+    ] }),
+    current.type === "product-by-sku" ? /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx9("div", { style: s2.label, children: "SKU" }),
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          style: s2.input,
+          type: "text",
+          placeholder: "Enter product SKU",
+          value: current.skus[0] ?? "",
+          onChange: handleSingleSkuChange
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx9("div", { style: s2.label, children: "SKUs" }),
+      /* @__PURE__ */ jsxs5("div", { style: s2.skuList, children: [
+        current.skus.map((sku, i) => /* @__PURE__ */ jsxs5("div", { style: s2.skuRow, children: [
+          /* @__PURE__ */ jsx9(
+            "input",
+            {
+              style: s2.input,
+              type: "text",
+              placeholder: `SKU ${i + 1}`,
+              value: sku,
+              onChange: (e) => handleMultiSkuChange(i, e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              style: s2.removeBtn,
+              onClick: () => removeSku(i),
+              title: "Remove SKU",
+              children: "\xD7"
+            }
+          )
+        ] }, i)),
+        /* @__PURE__ */ jsx9("button", { style: s2.addBtn, onClick: addSku, children: "+ Add SKU" })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/ProductTeaser.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var getLocalizedName = (name) => {
+  if (!name) return "";
+  return name["en"] ?? name["en-US"] ?? Object.values(name)[0] ?? "";
+};
+var formatPrice = (centAmount, currencyCode, fractionDigits) => {
+  const amount = centAmount / Math.pow(10, fractionDigits);
+  return `${currencyCode} ${amount.toFixed(fractionDigits)}`;
+};
+var ProductTeaserRender = ({
+  datasource,
+  richText
+}) => {
+  const hasPreResolved = datasource?.resolvedData != null;
+  const { data: fetchedData, loading, error } = useDatasource(
+    hasPreResolved ? void 0 : datasource?.type,
+    hasPreResolved ? [] : datasource?.skus ?? []
+  );
+  const data = hasPreResolved ? datasource.resolvedData : fetchedData;
+  const product = data ? Array.isArray(data) ? data[0] ?? null : data : null;
+  const imageUrl = product?.masterVariant?.images?.[0]?.url;
+  const priceValue = product?.masterVariant?.prices?.[0]?.value;
+  const productName = getLocalizedName(product?.name);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: "24px",
+        padding: "16px",
+        alignItems: "flex-start",
+        fontFamily: "inherit"
+      },
+      children: [
+        /* @__PURE__ */ jsx10("div", { style: { flexShrink: 0, width: "200px" }, children: loading ? /* @__PURE__ */ jsx10(
+          "div",
+          {
+            style: {
+              width: "200px",
+              height: "200px",
+              background: "#f3f4f6",
+              borderRadius: "8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#9ca3af",
+              fontSize: "13px"
+            },
+            children: "Loading\u2026"
+          }
+        ) : imageUrl ? /* @__PURE__ */ jsx10(
+          "img",
+          {
+            src: imageUrl,
+            alt: productName,
+            style: {
+              width: "200px",
+              height: "200px",
+              objectFit: "cover",
+              borderRadius: "8px",
+              display: "block"
+            }
+          }
+        ) : /* @__PURE__ */ jsx10(
+          "div",
+          {
+            style: {
+              width: "200px",
+              height: "200px",
+              background: "#f3f4f6",
+              borderRadius: "8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#9ca3af",
+              fontSize: "13px"
+            },
+            children: error ? "Error loading product" : "No product selected"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "12px",
+              flex: 1,
+              minWidth: 0
+            },
+            children: [
+              richText ? /* @__PURE__ */ jsx10("div", { dangerouslySetInnerHTML: { __html: richText } }) : /* @__PURE__ */ jsx10("div", { style: { color: "#9ca3af", fontSize: "13px" }, children: "No description" }),
+              priceValue && /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  style: {
+                    fontSize: "20px",
+                    fontWeight: 700,
+                    color: "#111827"
+                  },
+                  children: formatPrice(
+                    priceValue.centAmount,
+                    priceValue.currencyCode,
+                    priceValue.fractionDigits
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var ProductTeaser = {
+  label: "Product Teaser",
+  fields: {
+    datasource: {
+      type: "custom",
+      label: "Product Datasource",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx10(DatasourceField, { value, onChange })
+    },
+    richText: {
+      type: "textarea",
+      label: "Rich Text (HTML)"
+    }
+  },
+  defaultProps: {
+    datasource: { type: "product-by-sku", skus: [""] },
+    richText: ""
+  },
+  render: (props) => /* @__PURE__ */ jsx10(ProductTeaserRender, { ...props })
+};
+
+// src/components/cms/HeroBanner.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var HeroBanner = {
+  label: "Hero Banner",
+  fields: {
+    title: { type: "text", label: "Title" },
+    subtitle: { type: "text", label: "Subtitle" },
+    image: {
+      type: "custom",
+      label: "Image",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx11(ImagePickerField, { value: value ?? "", onChange })
+    }
+  },
+  defaultProps: { title: "", subtitle: "", image: "" },
+  render: ({ title, subtitle, image }) => /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: "100%",
+        paddingBottom: "56.25%",
+        overflow: "hidden",
+        backgroundColor: "#f0f0f0"
+      },
+      children: [
+        image && /* @__PURE__ */ jsx11(
+          "img",
+          {
+            src: image,
+            alt: title || "Hero banner",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              objectPosition: "center"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              background: "rgba(0,0,0,0.3)",
+              zIndex: 1
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%,-50%)",
+              textAlign: "center",
+              color: "white",
+              zIndex: 2,
+              padding: "2rem",
+              maxWidth: "90%"
+            },
+            children: [
+              title && /* @__PURE__ */ jsx11(
+                "h1",
+                {
+                  style: {
+                    fontSize: "3rem",
+                    fontWeight: "bold",
+                    margin: "0 0 1rem 0",
+                    textShadow: "2px 2px 4px rgba(0,0,0,0.7)"
+                  },
+                  children: title
+                }
+              ),
+              subtitle && /* @__PURE__ */ jsx11(
+                "p",
+                {
+                  style: {
+                    fontSize: "1.25rem",
+                    margin: 0,
+                    textShadow: "1px 1px 2px rgba(0,0,0,0.7)",
+                    opacity: 0.95
+                  },
+                  children: subtitle
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  )
+};
+
+// src/components/cms/TextBlock.tsx
+import { Fragment as Fragment2, jsx as jsx12 } from "react/jsx-runtime";
+var TextBlock = {
+  label: "Text Block",
+  fields: {
+    content: { type: "textarea", label: "Content (HTML)" }
+  },
+  defaultProps: { content: "" },
+  render: ({ content }) => {
+    if (!content) return /* @__PURE__ */ jsx12(Fragment2, {});
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: content },
+        style: {
+          maxWidth: "720px",
+          margin: "0 auto",
+          padding: "1.5rem 1rem",
+          lineHeight: 1.6,
+          color: "#333"
+        }
+      }
+    );
+  }
+};
+
+// src/components/cms/CategoryGrid.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var imgField = (label) => ({
+  type: "custom",
+  label,
+  render: ({ value, onChange }) => /* @__PURE__ */ jsx13(ImagePickerField, { value: value ?? "", onChange })
+});
+var CategoryGrid = {
+  label: "Category Grid",
+  fields: {
+    category1Image: imgField("Category 1 Image"),
+    category1Label: { type: "text", label: "Category 1 Label" },
+    category1Link: { type: "text", label: "Category 1 Link" },
+    category2Image: imgField("Category 2 Image"),
+    category2Label: { type: "text", label: "Category 2 Label" },
+    category2Link: { type: "text", label: "Category 2 Link" },
+    category3Image: imgField("Category 3 Image"),
+    category3Label: { type: "text", label: "Category 3 Label" },
+    category3Link: { type: "text", label: "Category 3 Link" },
+    category4Image: imgField("Category 4 Image"),
+    category4Label: { type: "text", label: "Category 4 Label" },
+    category4Link: { type: "text", label: "Category 4 Link" }
+  },
+  defaultProps: {
+    category1Image: "",
+    category1Label: "",
+    category1Link: "",
+    category2Image: "",
+    category2Label: "",
+    category2Link: "",
+    category3Image: "",
+    category3Label: "",
+    category3Link: "",
+    category4Image: "",
+    category4Label: "",
+    category4Link: ""
+  },
+  render: (props) => {
+    const categories = [
+      [props.category1Image, props.category1Label, props.category1Link],
+      [props.category2Image, props.category2Label, props.category2Link],
+      [props.category3Image, props.category3Label, props.category3Link],
+      [props.category4Image, props.category4Label, props.category4Link]
+    ].filter(([, label, link]) => label && link);
+    if (categories.length === 0) return /* @__PURE__ */ jsx13("div", { style: { padding: "2rem", textAlign: "center", color: "#999", fontSize: "13px" }, children: "No categories configured" });
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+          gap: "1.5rem",
+          padding: "2rem 1rem"
+        },
+        children: categories.map(([image, label, link], i) => /* @__PURE__ */ jsxs8(
+          "a",
+          {
+            href: link,
+            style: {
+              display: "block",
+              textAlign: "center",
+              textDecoration: "none",
+              color: "inherit",
+              borderRadius: "8px",
+              overflow: "hidden",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
+            },
+            children: [
+              /* @__PURE__ */ jsx13("div", { style: { aspectRatio: "1", background: "#f0f0f0", overflow: "hidden" }, children: image && /* @__PURE__ */ jsx13(
+                "img",
+                {
+                  src: image,
+                  alt: label,
+                  style: { width: "100%", height: "100%", objectFit: "cover" }
+                }
+              ) }),
+              /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  style: {
+                    display: "block",
+                    padding: "1rem",
+                    fontWeight: 600,
+                    color: "#333"
+                  },
+                  children: label
+                }
+              )
+            ]
+          },
+          i
+        ))
+      }
+    );
+  }
+};
+
+// src/components/cms/CategoryHero.tsx
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var CategoryHero = {
+  label: "Category Hero",
+  fields: {
+    title: { type: "text", label: "Title" },
+    subtitle: { type: "text", label: "Subtitle" },
+    image: {
+      type: "custom",
+      label: "Background Image",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx14(ImagePickerField, { value: value ?? "", onChange })
+    },
+    ctaText: { type: "text", label: "CTA Text" },
+    ctaLink: { type: "text", label: "CTA Link" }
+  },
+  defaultProps: { title: "", subtitle: "", image: "", ctaText: "", ctaLink: "" },
+  render: ({ title, subtitle, image, ctaText, ctaLink }) => /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      style: {
+        position: "relative",
+        minHeight: "220px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "#f0f0f0",
+        borderRadius: "8px",
+        overflow: "hidden",
+        margin: "1rem 0"
+      },
+      children: [
+        image && /* @__PURE__ */ jsx14(
+          "img",
+          {
+            src: image,
+            alt: title || "Category",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              opacity: 0.85
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx14("div", { style: { position: "absolute", inset: 0, background: "rgba(0,0,0,0.25)" } }),
+        /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            style: {
+              position: "relative",
+              zIndex: 1,
+              textAlign: "center",
+              padding: "2rem",
+              color: "white",
+              textShadow: "0 1px 3px rgba(0,0,0,0.5)"
+            },
+            children: [
+              title && /* @__PURE__ */ jsx14("h1", { style: { fontSize: "2.5rem", marginBottom: "0.5rem" }, children: title }),
+              subtitle && /* @__PURE__ */ jsx14("p", { style: { fontSize: "1.1rem", marginBottom: "1rem" }, children: subtitle }),
+              ctaText && ctaLink && /* @__PURE__ */ jsx14(
+                "a",
+                {
+                  href: ctaLink,
+                  style: {
+                    display: "inline-block",
+                    background: "white",
+                    color: "#2c5530",
+                    padding: "0.75rem 2rem",
+                    borderRadius: "4px",
+                    textDecoration: "none",
+                    fontWeight: 600
+                  },
+                  children: ctaText
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  )
+};
+
+// src/components/cms/CheckoutPromoBanner.tsx
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var CheckoutPromoBanner = {
+  label: "Checkout Promo Banner",
+  fields: {
+    title: { type: "text", label: "Title" },
+    message: { type: "text", label: "Message" },
+    ctaText: { type: "text", label: "CTA Text" },
+    ctaLink: { type: "text", label: "CTA Link" }
+  },
+  defaultProps: { title: "", message: "", ctaText: "", ctaLink: "" },
+  render: ({ title, message, ctaText, ctaLink }) => {
+    if (!title && !message && !ctaText) return /* @__PURE__ */ jsx15(Fragment3, {});
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        style: {
+          padding: "1rem 1.25rem",
+          background: "#f0f7f0",
+          border: "1px solid #c8e6c8",
+          borderRadius: "4px",
+          marginBottom: "1rem",
+          fontSize: "0.95rem"
+        },
+        children: [
+          title && /* @__PURE__ */ jsx15("div", { style: { fontWeight: 600, color: "#2c5530", marginBottom: "0.25rem" }, children: title }),
+          message && /* @__PURE__ */ jsx15("p", { style: { margin: "0 0 0.5rem 0", color: "#333" }, children: message }),
+          ctaText && ctaLink && /* @__PURE__ */ jsx15("a", { href: ctaLink, style: { color: "#2c5530", fontWeight: 600, textDecoration: "none" }, children: ctaText })
+        ]
+      }
+    );
+  }
+};
+
+// src/components/cms/CountdownBanner.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var calcTimeLeft = (endDate) => {
+  if (!endDate) return "";
+  const end = new Date(endDate);
+  const now = /* @__PURE__ */ new Date();
+  if (end <= now) return "Offer ended";
+  const diff = end.getTime() - now.getTime();
+  const d = Math.floor(diff / 864e5);
+  const h = Math.floor(diff % 864e5 / 36e5);
+  const m = Math.floor(diff % 36e5 / 6e4);
+  const s3 = Math.floor(diff % 6e4 / 1e3);
+  if (d > 0) return `${d}d ${h}h ${m}m left`;
+  if (h > 0) return `${h}h ${m}m ${s3}s left`;
+  return `${m}m ${s3}s left`;
+};
+var CountdownRender = ({
+  headline,
+  subline,
+  endDate,
+  ctaText,
+  ctaLink,
+  background
+}) => {
+  const [timeLeft, setTimeLeft] = useState2(() => calcTimeLeft(endDate));
+  useEffect2(() => {
+    if (!endDate) return;
+    const id = setInterval(() => setTimeLeft(calcTimeLeft(endDate)), 1e3);
+    return () => clearInterval(id);
+  }, [endDate]);
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      style: {
+        background: background || "#2c5530",
+        color: "white",
+        padding: "2rem 1rem",
+        textAlign: "center",
+        borderRadius: "4px",
+        margin: "1rem 0"
+      },
+      children: [
+        headline && /* @__PURE__ */ jsx16("h2", { style: { fontSize: "1.75rem", marginBottom: "0.5rem" }, children: headline }),
+        subline && /* @__PURE__ */ jsx16("p", { style: { fontSize: "1rem", opacity: 0.9, marginBottom: "1rem" }, children: subline }),
+        timeLeft && /* @__PURE__ */ jsx16("p", { style: { fontSize: "1.25rem", fontWeight: 600, margin: "0 0 1rem 0", letterSpacing: "0.05em" }, children: timeLeft }),
+        ctaText && ctaLink && /* @__PURE__ */ jsx16(
+          "a",
+          {
+            href: ctaLink,
+            style: {
+              display: "inline-block",
+              background: "white",
+              color: "#2c5530",
+              padding: "0.75rem 2rem",
+              borderRadius: "4px",
+              textDecoration: "none",
+              fontWeight: 600
+            },
+            children: ctaText
+          }
+        )
+      ]
+    }
+  );
+};
+var CountdownBanner = {
+  label: "Countdown Banner",
+  fields: {
+    headline: { type: "text", label: "Headline" },
+    subline: { type: "text", label: "Subline" },
+    endDate: { type: "text", label: "End Date (ISO, e.g. 2025-12-31T23:59:59)" },
+    ctaText: { type: "text", label: "CTA Text" },
+    ctaLink: { type: "text", label: "CTA Link" },
+    background: { type: "text", label: "Background Color" }
+  },
+  defaultProps: {
+    headline: "",
+    subline: "",
+    endDate: "",
+    ctaText: "",
+    ctaLink: "",
+    background: "#2c5530"
+  },
+  render: (props) => /* @__PURE__ */ jsx16(CountdownRender, { ...props })
+};
+
+// src/components/cms/CrossSellBlock.tsx
+import { useDatasource as useDatasource2 } from "@commercetools-demo/puck-api";
+
+// src/components/cms/shared.ts
+var getLocalizedText = (obj) => {
+  if (!obj) return "";
+  return obj["en-US"] ?? obj["en"] ?? Object.values(obj)[0] ?? "";
+};
+var formatPrice2 = (centAmount, currencyCode = "USD", fractionDigits = 2) => {
+  const amount = centAmount / Math.pow(10, fractionDigits);
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: currencyCode
+  }).format(amount);
+};
+var getFirstPrice = (product) => {
+  const p = product;
+  return p?.masterVariant?.prices?.[0]?.value ?? null;
+};
+var getProductImage = (product) => {
+  const p = product;
+  return p?.masterVariant?.images?.[0]?.url ?? null;
+};
+var getProductSlug = (product) => {
+  const p = product;
+  return getLocalizedText(p?.slug) || p?.id || "#";
+};
+
+// src/components/cms/CrossSellBlock.tsx
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var CrossSellRender = ({ title, products, ctaText }) => {
+  const hasPreResolved = products?.resolvedData != null;
+  const { data: fetchedData, loading } = useDatasource2(
+    hasPreResolved ? void 0 : products?.type,
+    hasPreResolved ? [] : products?.skus ?? []
+  );
+  const items = hasPreResolved ? Array.isArray(products.resolvedData) ? products.resolvedData : [] : Array.isArray(fetchedData) ? fetchedData : [];
+  if (!loading && items.length === 0) return null;
+  return /* @__PURE__ */ jsxs12("div", { style: { padding: "2rem 0", borderTop: "1px solid #eee" }, children: [
+    title && /* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.5rem", marginBottom: "1.5rem", color: "#333" }, children: title || "Frequently bought together" }),
+    loading && /* @__PURE__ */ jsx17("div", { style: { color: "#999", padding: "1rem" }, children: "Loading\u2026" }),
+    items.length > 0 && /* @__PURE__ */ jsx17(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+          gap: "1rem"
+        },
+        children: items.map((product, i) => {
+          const name = getLocalizedText(product?.name);
+          const imageUrl = getProductImage(product);
+          const priceVal = getFirstPrice(product);
+          const slug = getProductSlug(product);
+          return /* @__PURE__ */ jsxs12(
+            "a",
+            {
+              href: slug,
+              style: {
+                textAlign: "center",
+                textDecoration: "none",
+                color: "inherit",
+                padding: "1rem",
+                borderRadius: "8px",
+                border: "1px solid #eee"
+              },
+              children: [
+                /* @__PURE__ */ jsx17("div", { style: { height: "120px", marginBottom: "0.75rem", display: "flex", alignItems: "center", justifyContent: "center", background: "#f9f9f9", borderRadius: "4px" }, children: imageUrl ? /* @__PURE__ */ jsx17("img", { src: imageUrl, alt: name, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }) : null }),
+                /* @__PURE__ */ jsx17("div", { style: { fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: name }),
+                priceVal && /* @__PURE__ */ jsx17("div", { style: { fontSize: "1.1rem", color: "#2c5530", fontWeight: "bold" }, children: formatPrice2(priceVal.centAmount, priceVal.currencyCode, priceVal.fractionDigits) })
+              ]
+            },
+            product?.id ?? i
+          );
+        })
+      }
+    ),
+    ctaText && /* @__PURE__ */ jsx17("a", { href: "#", style: { display: "inline-block", marginTop: "1rem", color: "#2c5530", fontWeight: 600, textDecoration: "none" }, children: ctaText })
+  ] });
+};
+var CrossSellBlock = {
+  label: "Cross-Sell Block",
+  fields: {
+    title: { type: "text", label: "Title" },
+    products: {
+      type: "custom",
+      label: "Products",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx17(DatasourceField, { value, onChange })
+    },
+    ctaText: { type: "text", label: "CTA Text" }
+  },
+  defaultProps: {
+    title: "Frequently bought together",
+    products: { type: "products-by-sku", skus: [""] },
+    ctaText: ""
+  },
+  render: (props) => /* @__PURE__ */ jsx17(CrossSellRender, { ...props })
+};
+
+// src/components/cms/DeliveryMessage.tsx
+import { Fragment as Fragment4, jsx as jsx18 } from "react/jsx-runtime";
+var DeliveryMessage = {
+  label: "Delivery Message",
+  fields: {
+    message: { type: "text", label: "Message (use $XX for threshold)" },
+    threshold: { type: "text", label: "Threshold Amount (e.g. 50)" }
+  },
+  defaultProps: { message: "Free delivery on orders over $50", threshold: "" },
+  render: ({ message, threshold }) => {
+    if (!message) return /* @__PURE__ */ jsx18(Fragment4, {});
+    const text = threshold ? message.replace(/\$\d+/g, `$${threshold}`) : message;
+    return /* @__PURE__ */ jsx18(
+      "div",
+      {
+        style: {
+          padding: "0.75rem 1rem",
+          background: "#f0f7f0",
+          borderRadius: "4px",
+          fontSize: "0.95rem",
+          color: "#2c5530"
+        },
+        children: text
+      }
+    );
+  }
+};
+
+// src/components/cms/Divider.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Divider = {
+  label: "Divider",
+  fields: {
+    lineStyle: {
+      type: "select",
+      label: "Line Style",
+      options: [
+        { value: "solid", label: "Solid" },
+        { value: "dashed", label: "Dashed" },
+        { value: "dotted", label: "Dotted" }
+      ]
+    },
+    spacing: { type: "text", label: "Spacing (px)" }
+  },
+  defaultProps: { lineStyle: "solid", spacing: "24" },
+  render: ({ lineStyle, spacing }) => {
+    const s3 = parseInt(spacing, 10) || 24;
+    return /* @__PURE__ */ jsx19(
+      "hr",
+      {
+        style: {
+          border: "none",
+          borderTop: `1px ${lineStyle} #ddd`,
+          margin: `${s3 / 2}px 0`
+        }
+      }
+    );
+  }
+};
+
+// src/components/cms/EmptyState.tsx
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var EmptyState = {
+  label: "Empty State",
+  fields: {
+    image: {
+      type: "custom",
+      label: "Image",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx20(ImagePickerField, { value: value ?? "", onChange })
+    },
+    title: { type: "text", label: "Title" },
+    description: { type: "text", label: "Description" },
+    ctaText: { type: "text", label: "CTA Text" },
+    ctaLink: { type: "text", label: "CTA Link" }
+  },
+  defaultProps: { image: "", title: "", description: "", ctaText: "", ctaLink: "" },
+  render: ({ image, title, description, ctaText, ctaLink }) => /* @__PURE__ */ jsxs13("div", { style: { textAlign: "center", padding: "3rem 1rem" }, children: [
+    image && /* @__PURE__ */ jsx20(
+      "img",
+      {
+        src: image,
+        alt: title || "Empty state",
+        style: { maxWidth: "200px", height: "auto", marginBottom: "1.5rem", opacity: 0.8 }
+      }
+    ),
+    title && /* @__PURE__ */ jsx20("h2", { style: { fontSize: "1.5rem", color: "#333", marginBottom: "0.5rem" }, children: title }),
+    description && /* @__PURE__ */ jsx20("p", { style: { color: "#666", marginBottom: "1.5rem", maxWidth: "400px", margin: "0 auto 1.5rem" }, children: description }),
+    ctaText && ctaLink && /* @__PURE__ */ jsx20(
+      "a",
+      {
+        href: ctaLink,
+        style: {
+          display: "inline-block",
+          background: "#2c5530",
+          color: "white",
+          padding: "0.75rem 2rem",
+          borderRadius: "4px",
+          textDecoration: "none",
+          fontWeight: 600
+        },
+        children: ctaText
+      }
+    )
+  ] })
+};
+
+// src/components/cms/FAQAccordion.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var FAQRender = (props) => {
+  const items = [
+    [props.question1, props.answer1],
+    [props.question2, props.answer2],
+    [props.question3, props.answer3],
+    [props.question4, props.answer4]
+  ].filter(([q]) => q);
+  const [open, setOpen] = useState3(null);
+  if (items.length === 0) return /* @__PURE__ */ jsx21("div", { style: { padding: "1rem", color: "#999", fontSize: "13px" }, children: "No FAQ items configured" });
+  return /* @__PURE__ */ jsx21("div", { style: { border: "1px solid #eee", borderRadius: "8px", overflow: "hidden" }, children: items.map(([question, answer], i) => /* @__PURE__ */ jsxs14("div", { style: { borderBottom: i < items.length - 1 ? "1px solid #eee" : "none" }, children: [
+    /* @__PURE__ */ jsxs14(
+      "button",
+      {
+        onClick: () => setOpen(open === i ? null : i),
+        style: {
+          width: "100%",
+          padding: "1rem 1.25rem",
+          textAlign: "left",
+          fontWeight: 600,
+          fontSize: "1rem",
+          background: "#fafafa",
+          border: "none",
+          cursor: "pointer",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [
+          question,
+          /* @__PURE__ */ jsx21("span", { style: { fontSize: "1.2rem", lineHeight: 1 }, children: open === i ? "\u2212" : "+" })
+        ]
+      }
+    ),
+    open === i && answer && /* @__PURE__ */ jsx21(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: answer },
+        style: {
+          padding: "1rem 1.25rem",
+          background: "white",
+          fontSize: "0.95rem",
+          lineHeight: 1.5,
+          color: "#555"
+        }
+      }
+    )
+  ] }, i)) });
+};
+var FAQAccordion = {
+  label: "FAQ Accordion",
+  fields: {
+    question1: { type: "text", label: "Question 1" },
+    answer1: { type: "textarea", label: "Answer 1 (HTML)" },
+    question2: { type: "text", label: "Question 2" },
+    answer2: { type: "textarea", label: "Answer 2 (HTML)" },
+    question3: { type: "text", label: "Question 3" },
+    answer3: { type: "textarea", label: "Answer 3 (HTML)" },
+    question4: { type: "text", label: "Question 4" },
+    answer4: { type: "textarea", label: "Answer 4 (HTML)" }
+  },
+  defaultProps: {
+    question1: "",
+    answer1: "",
+    question2: "",
+    answer2: "",
+    question3: "",
+    answer3: "",
+    question4: "",
+    answer4: ""
+  },
+  render: (props) => /* @__PURE__ */ jsx21(FAQRender, { ...props })
+};
+
+// src/components/cms/FooterBlock.tsx
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var FooterBlock = {
+  label: "Footer Block",
+  fields: {
+    column1: { type: "textarea", label: "Column 1 (HTML)" },
+    column2: { type: "textarea", label: "Column 2 (HTML)" },
+    column3: { type: "textarea", label: "Column 3 (HTML)" },
+    copyright: { type: "text", label: "Copyright Text" }
+  },
+  defaultProps: { column1: "", column2: "", column3: "", copyright: "" },
+  render: ({ column1, column2, column3, copyright }) => {
+    const columns = [column1, column2, column3].filter(Boolean);
+    return /* @__PURE__ */ jsxs15("footer", { style: { background: "#333", color: "#eee", padding: "2rem 1rem", marginTop: "3rem" }, children: [
+      columns.length > 0 && /* @__PURE__ */ jsx22(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: `repeat(${columns.length}, 1fr)`,
+            gap: "2rem",
+            maxWidth: "1200px",
+            margin: "0 auto 2rem"
+          },
+          children: columns.map((html, i) => /* @__PURE__ */ jsx22(
+            "div",
+            {
+              dangerouslySetInnerHTML: { __html: html },
+              style: { fontSize: "0.9rem", lineHeight: 1.6 }
+            },
+            i
+          ))
+        }
+      ),
+      copyright && /* @__PURE__ */ jsx22("p", { style: { textAlign: "center", fontSize: "0.85rem", color: "#999", margin: 0 }, children: copyright })
+    ] });
+  }
+};
+
+// src/components/cms/ImageBlock.tsx
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+var ImageBlock = {
+  label: "Image Block",
+  fields: {
+    image: {
+      type: "custom",
+      label: "Image",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx23(ImagePickerField, { value: value ?? "", onChange })
+    },
+    caption: { type: "text", label: "Caption" },
+    link: { type: "text", label: "Link URL" }
+  },
+  defaultProps: { image: "", caption: "", link: "" },
+  render: ({ image, caption, link }) => {
+    if (!image) return /* @__PURE__ */ jsx23("div", { style: { padding: "2rem", textAlign: "center", color: "#999", background: "#f5f5f5", borderRadius: "4px" }, children: "No image selected" });
+    const img = /* @__PURE__ */ jsx23(
+      "img",
+      {
+        src: image,
+        alt: caption || "Image",
+        style: { maxWidth: "100%", height: "auto", borderRadius: "4px" }
+      }
+    );
+    return /* @__PURE__ */ jsxs16("figure", { style: { margin: "1rem 0", textAlign: "center" }, children: [
+      link ? /* @__PURE__ */ jsx23("a", { href: link, style: { display: "inline-block" }, children: img }) : img,
+      caption && /* @__PURE__ */ jsx23("figcaption", { style: { marginTop: "0.5rem", fontSize: "0.9rem", color: "#666" }, children: caption })
+    ] });
+  }
+};
+
+// src/components/cms/NewsletterSignup.tsx
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+var NewsletterSignup = {
+  label: "Newsletter Signup",
+  fields: {
+    title: { type: "text", label: "Title" },
+    subtitle: { type: "text", label: "Subtitle" },
+    ctaText: { type: "text", label: "Button Text" },
+    placeholder: { type: "text", label: "Input Placeholder" }
+  },
+  defaultProps: { title: "", subtitle: "", ctaText: "Subscribe", placeholder: "Enter your email" },
+  render: ({ title, subtitle, ctaText, placeholder }) => /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      style: {
+        textAlign: "center",
+        padding: "2rem 1rem",
+        background: "#f5f5f5",
+        borderRadius: "8px",
+        maxWidth: "480px",
+        margin: "0 auto"
+      },
+      children: [
+        title && /* @__PURE__ */ jsx24("h3", { style: { fontSize: "1.5rem", marginBottom: "0.5rem", color: "#333" }, children: title }),
+        subtitle && /* @__PURE__ */ jsx24("p", { style: { fontSize: "0.95rem", color: "#666", marginBottom: "1.5rem" }, children: subtitle }),
+        /* @__PURE__ */ jsxs17(
+          "form",
+          {
+            onSubmit: (e) => e.preventDefault(),
+            style: { display: "flex", gap: "0.5rem", flexWrap: "wrap", justifyContent: "center" },
+            children: [
+              /* @__PURE__ */ jsx24(
+                "input",
+                {
+                  type: "email",
+                  placeholder,
+                  "aria-label": "Email",
+                  style: {
+                    padding: "0.75rem 1rem",
+                    border: "1px solid #ddd",
+                    borderRadius: "4px",
+                    fontSize: "1rem",
+                    minWidth: "200px"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx24(
+                "button",
+                {
+                  type: "submit",
+                  style: {
+                    padding: "0.75rem 1.5rem",
+                    background: "#2c5530",
+                    color: "white",
+                    border: "none",
+                    borderRadius: "4px",
+                    fontWeight: 600,
+                    cursor: "pointer"
+                  },
+                  children: ctaText || "Subscribe"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  )
+};
+
+// src/components/cms/ProductBanner.tsx
+import { useDatasource as useDatasource3 } from "@commercetools-demo/puck-api";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+var ProductBannerRender = ({
+  title,
+  description,
+  ctaText,
+  ctaLink,
+  product,
+  productOnLeft,
+  background
+}) => {
+  const hasPreResolved = product?.resolvedData != null;
+  const { data: fetchedData, loading } = useDatasource3(
+    hasPreResolved ? void 0 : product?.type,
+    hasPreResolved ? [] : product?.skus ?? []
+  );
+  const raw = hasPreResolved ? product.resolvedData : fetchedData;
+  const p = raw;
+  const name = getLocalizedText(p?.name);
+  const description2 = getLocalizedText(p?.description);
+  const imageUrl = p?.masterVariant?.images?.[0]?.url;
+  const sku = p?.masterVariant?.sku;
+  const priceVal = getFirstPrice(p);
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        minHeight: "400px",
+        backgroundColor: background || "#f5f5f5",
+        padding: "2rem",
+        borderRadius: "2px",
+        margin: "1rem 0",
+        gap: "2rem",
+        flexDirection: productOnLeft ? "row-reverse" : "row",
+        flexWrap: "wrap"
+      },
+      children: [
+        /* @__PURE__ */ jsxs18("div", { style: { flex: 1, minWidth: "200px" }, children: [
+          title && /* @__PURE__ */ jsx25("h2", { style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "1rem", color: "#333" }, children: title }),
+          description && /* @__PURE__ */ jsx25(
+            "div",
+            {
+              dangerouslySetInnerHTML: { __html: description },
+              style: { marginBottom: "2rem", color: "#555", lineHeight: 1.6 }
+            }
+          ),
+          ctaText && ctaLink && /* @__PURE__ */ jsx25(
+            "a",
+            {
+              href: ctaLink,
+              style: {
+                display: "inline-block",
+                backgroundColor: "#2c5530",
+                color: "white",
+                padding: "0.75rem 2rem",
+                borderRadius: "2px",
+                textDecoration: "none",
+                fontWeight: 600
+              },
+              children: ctaText
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs18("div", { style: { flex: 1, minWidth: "200px", display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+          loading && /* @__PURE__ */ jsx25("div", { style: { color: "#999", padding: "2rem" }, children: "Loading product\u2026" }),
+          name && /* @__PURE__ */ jsx25("h3", { style: { fontSize: "1.5rem", fontWeight: 600, marginBottom: "0.5rem", textAlign: "center" }, children: name }),
+          description2 && /* @__PURE__ */ jsx25("p", { style: { fontSize: "0.9rem", color: "#666", textAlign: "center", marginBottom: "1rem", fontStyle: "italic" }, children: description2 }),
+          imageUrl && /* @__PURE__ */ jsx25(
+            "img",
+            {
+              src: imageUrl,
+              alt: name || "Product",
+              style: { maxWidth: "100%", maxHeight: "300px", objectFit: "cover", borderRadius: "2px", marginBottom: "1rem", boxShadow: "0 4px 12px rgba(0,0,0,0.1)" }
+            }
+          ),
+          priceVal && /* @__PURE__ */ jsx25(
+            "span",
+            {
+              style: {
+                fontSize: "1.25rem",
+                fontWeight: "bold",
+                color: "#2c5530",
+                background: "rgba(255,255,255,0.8)",
+                padding: "0.5rem 1rem",
+                borderRadius: "2px",
+                marginBottom: "0.5rem"
+              },
+              children: formatPrice2(priceVal.centAmount, priceVal.currencyCode, priceVal.fractionDigits)
+            }
+          ),
+          sku && /* @__PURE__ */ jsxs18("span", { style: { fontSize: "0.85rem", color: "#666", background: "rgba(255,255,255,0.6)", padding: "0.25rem 0.75rem", borderRadius: "2px" }, children: [
+            "SKU: ",
+            sku
+          ] }),
+          !loading && !p && /* @__PURE__ */ jsx25("div", { style: { color: "#999", fontSize: "13px", padding: "2rem", textAlign: "center" }, children: "No product selected" })
+        ] })
+      ]
+    }
+  );
+};
+var ProductBanner = {
+  label: "Product Banner",
+  fields: {
+    title: { type: "text", label: "Title" },
+    description: { type: "textarea", label: "Description (HTML)" },
+    ctaText: { type: "text", label: "CTA Text" },
+    ctaLink: { type: "text", label: "CTA Link" },
+    product: {
+      type: "custom",
+      label: "Product",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx25(DatasourceField, { value, onChange })
+    },
+    productOnLeft: {
+      type: "radio",
+      label: "Product Position",
+      options: [
+        { value: false, label: "Product on Right" },
+        { value: true, label: "Product on Left" }
+      ]
+    },
+    background: { type: "text", label: "Background Color" }
+  },
+  defaultProps: {
+    title: "",
+    description: "",
+    ctaText: "",
+    ctaLink: "",
+    product: { type: "product-by-sku", skus: [""] },
+    productOnLeft: false,
+    background: "#f5f5f5"
+  },
+  render: (props) => /* @__PURE__ */ jsx25(ProductBannerRender, { ...props })
+};
+
+// src/components/cms/ProductGridHeader.tsx
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+var ProductGridHeader = {
+  label: "Product Grid Header",
+  fields: {
+    title: { type: "text", label: "Title" },
+    description: { type: "textarea", label: "Description (HTML)" }
+  },
+  defaultProps: { title: "", description: "" },
+  render: ({ title, description }) => /* @__PURE__ */ jsxs19("div", { style: { marginBottom: "2rem", padding: "0 1rem" }, children: [
+    title && /* @__PURE__ */ jsx26("h1", { style: { fontSize: "2rem", fontWeight: "bold", color: "#333", marginBottom: "0.75rem" }, children: title }),
+    description && /* @__PURE__ */ jsx26(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: description },
+        style: { fontSize: "1rem", color: "#666", lineHeight: 1.5, maxWidth: "720px" }
+      }
+    )
+  ] })
+};
+
+// src/components/cms/ProductSlider.tsx
+import { useDatasource as useDatasource4 } from "@commercetools-demo/puck-api";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+var ProductSliderRender = ({ title, subtitle, products }) => {
+  const hasPreResolved = products?.resolvedData != null;
+  const { data: fetchedData, loading } = useDatasource4(
+    hasPreResolved ? void 0 : products?.type,
+    hasPreResolved ? [] : products?.skus ?? []
+  );
+  const items = hasPreResolved ? Array.isArray(products.resolvedData) ? products.resolvedData : [] : Array.isArray(fetchedData) ? fetchedData : [];
+  return /* @__PURE__ */ jsxs20("div", { style: { padding: "2rem 0" }, children: [
+    (title || subtitle) && /* @__PURE__ */ jsxs20("div", { style: { textAlign: "center", marginBottom: "1.5rem" }, children: [
+      title && /* @__PURE__ */ jsx27("h2", { style: { fontSize: "2rem", fontWeight: "bold", color: "#333", marginBottom: "0.5rem" }, children: title }),
+      subtitle && /* @__PURE__ */ jsx27("p", { style: { fontSize: "1.1rem", color: "#666", margin: 0 }, children: subtitle })
+    ] }),
+    loading && /* @__PURE__ */ jsx27("div", { style: { textAlign: "center", color: "#999", padding: "2rem" }, children: "Loading products\u2026" }),
+    !loading && items.length === 0 && /* @__PURE__ */ jsx27("div", { style: { textAlign: "center", color: "#999", padding: "2rem", fontSize: "13px" }, children: "No products configured" }),
+    items.length > 0 && /* @__PURE__ */ jsx27(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "1rem",
+          overflowX: "auto",
+          scrollSnapType: "x mandatory",
+          paddingBottom: "1rem"
+        },
+        children: items.map((product, i) => {
+          const name = getLocalizedText(product?.name);
+          const desc = getLocalizedText(product?.description);
+          const imageUrl = getProductImage(product);
+          const priceVal = getFirstPrice(product);
+          const slug = getProductSlug(product);
+          return /* @__PURE__ */ jsxs20(
+            "a",
+            {
+              href: slug,
+              style: {
+                flex: "0 0 280px",
+                background: "white",
+                borderRadius: "12px",
+                boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+                overflow: "hidden",
+                textDecoration: "none",
+                color: "inherit",
+                scrollSnapAlign: "start"
+              },
+              children: [
+                /* @__PURE__ */ jsx27("div", { style: { width: "100%", height: "200px", background: "#f5f5f5", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }, children: imageUrl ? /* @__PURE__ */ jsx27("img", { src: imageUrl, alt: name, style: { width: "100%", height: "100%", objectFit: "contain" } }) : /* @__PURE__ */ jsx27("span", { style: { color: "#999", fontSize: "0.85rem" }, children: "No image" }) }),
+                /* @__PURE__ */ jsxs20("div", { style: { padding: "1.5rem" }, children: [
+                  /* @__PURE__ */ jsx27("h3", { style: { fontSize: "1.1rem", fontWeight: 600, color: "#333", marginBottom: "0.5rem", lineHeight: 1.3 }, children: name }),
+                  desc && /* @__PURE__ */ jsx27("p", { style: { fontSize: "0.9rem", color: "#666", marginBottom: "1rem", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }, children: desc }),
+                  priceVal && /* @__PURE__ */ jsx27("div", { style: { fontSize: "1.2rem", fontWeight: "bold", color: "#2c5530" }, children: formatPrice2(priceVal.centAmount, priceVal.currencyCode, priceVal.fractionDigits) })
+                ] })
+              ]
+            },
+            product?.id ?? i
+          );
+        })
+      }
+    )
+  ] });
+};
+var ProductSlider = {
+  label: "Product Slider",
+  fields: {
+    title: { type: "text", label: "Title" },
+    subtitle: { type: "text", label: "Subtitle" },
+    products: {
+      type: "custom",
+      label: "Products",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx27(DatasourceField, { value, onChange })
+    }
+  },
+  defaultProps: {
+    title: "",
+    subtitle: "",
+    products: { type: "products-by-sku", skus: [""] }
+  },
+  render: (props) => /* @__PURE__ */ jsx27(ProductSliderRender, { ...props })
+};
+
+// src/components/cms/PromotionalBanner.tsx
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+var PromotionalBanner = {
+  label: "Promotional Banner",
+  fields: {
+    image: {
+      type: "custom",
+      label: "Image",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx28(ImagePickerField, { value: value ?? "", onChange })
+    },
+    title: { type: "text", label: "Title" },
+    subtitle: { type: "text", label: "Subtitle" },
+    ctaText: { type: "text", label: "CTA Text" },
+    ctaLink: { type: "text", label: "CTA Link" },
+    background: { type: "text", label: "Background Color" }
+  },
+  defaultProps: { image: "", title: "", subtitle: "", ctaText: "", ctaLink: "", background: "#f5f5f5" },
+  render: ({ image, title, subtitle, ctaText, ctaLink, background }) => /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "280px",
+        backgroundColor: background || "#f5f5f5",
+        padding: "2rem",
+        borderRadius: "2px",
+        margin: "1rem 0",
+        gap: "2rem",
+        flexWrap: "wrap"
+      },
+      children: [
+        image && /* @__PURE__ */ jsx28("div", { style: { flex: "0 0 auto", maxWidth: "40%" }, children: /* @__PURE__ */ jsx28("img", { src: image, alt: title || "Promo", style: { maxWidth: "100%", height: "auto", borderRadius: "2px" } }) }),
+        /* @__PURE__ */ jsxs21("div", { style: { flex: 1, minWidth: "200px" }, children: [
+          title && /* @__PURE__ */ jsx28("h2", { style: { fontSize: "1.75rem", fontWeight: "bold", marginBottom: "0.5rem", color: "#333" }, children: title }),
+          subtitle && /* @__PURE__ */ jsx28("p", { style: { fontSize: "1rem", color: "#666", marginBottom: "1rem" }, children: subtitle }),
+          ctaText && ctaLink && /* @__PURE__ */ jsx28(
+            "a",
+            {
+              href: ctaLink,
+              style: {
+                display: "inline-block",
+                backgroundColor: "#2c5530",
+                color: "white",
+                padding: "0.75rem 2rem",
+                borderRadius: "2px",
+                textDecoration: "none",
+                fontWeight: 600
+              },
+              children: ctaText
+            }
+          )
+        ] })
+      ]
+    }
+  )
+};
+
+// src/components/cms/RelatedProductsSlider.tsx
+import { useDatasource as useDatasource5 } from "@commercetools-demo/puck-api";
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+var RelatedProductsRender = ({ title, subtitle, products }) => {
+  const hasPreResolved = products?.resolvedData != null;
+  const { data: fetchedData, loading } = useDatasource5(
+    hasPreResolved ? void 0 : products?.type,
+    hasPreResolved ? [] : products?.skus ?? []
+  );
+  const items = hasPreResolved ? Array.isArray(products.resolvedData) ? products.resolvedData : [] : Array.isArray(fetchedData) ? fetchedData : [];
+  if (!loading && items.length === 0) return null;
+  return /* @__PURE__ */ jsxs22("div", { style: { padding: "2rem 0" }, children: [
+    (title || subtitle) && /* @__PURE__ */ jsxs22("div", { style: { textAlign: "center", marginBottom: "1.5rem" }, children: [
+      title && /* @__PURE__ */ jsx29("h2", { style: { fontSize: "2rem", fontWeight: "bold", color: "#333", marginBottom: "0.5rem" }, children: title }),
+      subtitle && /* @__PURE__ */ jsx29("p", { style: { fontSize: "1.1rem", color: "#666", margin: 0 }, children: subtitle })
+    ] }),
+    loading && /* @__PURE__ */ jsx29("div", { style: { textAlign: "center", color: "#999", padding: "2rem" }, children: "Loading\u2026" }),
+    items.length > 0 && /* @__PURE__ */ jsx29(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "1rem",
+          overflowX: "auto",
+          scrollSnapType: "x mandatory",
+          paddingBottom: "1rem"
+        },
+        children: items.map((product, i) => {
+          const name = getLocalizedText(product?.name);
+          const imageUrl = getProductImage(product);
+          const priceVal = getFirstPrice(product);
+          const slug = getProductSlug(product);
+          return /* @__PURE__ */ jsxs22(
+            "a",
+            {
+              href: slug,
+              style: {
+                flex: "0 0 280px",
+                background: "white",
+                borderRadius: "12px",
+                boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+                overflow: "hidden",
+                textDecoration: "none",
+                color: "inherit",
+                scrollSnapAlign: "start"
+              },
+              children: [
+                /* @__PURE__ */ jsx29("div", { style: { width: "100%", height: "200px", background: "#f5f5f5", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }, children: imageUrl ? /* @__PURE__ */ jsx29("img", { src: imageUrl, alt: name, style: { width: "100%", height: "100%", objectFit: "contain" } }) : /* @__PURE__ */ jsx29("span", { style: { color: "#999", fontSize: "0.85rem" }, children: "No image" }) }),
+                /* @__PURE__ */ jsxs22("div", { style: { padding: "1.5rem" }, children: [
+                  /* @__PURE__ */ jsx29("h3", { style: { fontSize: "1.1rem", fontWeight: 600, color: "#333", marginBottom: "0.5rem" }, children: name }),
+                  priceVal && /* @__PURE__ */ jsx29("div", { style: { fontSize: "1.2rem", fontWeight: "bold", color: "#2c5530" }, children: formatPrice2(priceVal.centAmount, priceVal.currencyCode, priceVal.fractionDigits) })
+                ] })
+              ]
+            },
+            product?.id ?? i
+          );
+        })
+      }
+    )
+  ] });
+};
+var RelatedProductsSlider = {
+  label: "Related Products",
+  fields: {
+    title: { type: "text", label: "Title" },
+    subtitle: { type: "text", label: "Subtitle" },
+    products: {
+      type: "custom",
+      label: "Products",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx29(DatasourceField, { value, onChange })
+    }
+  },
+  defaultProps: {
+    title: "Related Products",
+    subtitle: "",
+    products: { type: "products-by-sku", skus: [""] }
+  },
+  render: (props) => /* @__PURE__ */ jsx29(RelatedProductsRender, { ...props })
+};
+
+// src/components/cms/SocialLinks.tsx
+import { Fragment as Fragment5, jsx as jsx30 } from "react/jsx-runtime";
+var SocialLinks = {
+  label: "Social Links",
+  fields: {
+    link1Label: { type: "text", label: "Link 1 Label" },
+    link1Url: { type: "text", label: "Link 1 URL" },
+    link2Label: { type: "text", label: "Link 2 Label" },
+    link2Url: { type: "text", label: "Link 2 URL" },
+    link3Label: { type: "text", label: "Link 3 Label" },
+    link3Url: { type: "text", label: "Link 3 URL" },
+    link4Label: { type: "text", label: "Link 4 Label" },
+    link4Url: { type: "text", label: "Link 4 URL" }
+  },
+  defaultProps: {
+    link1Label: "",
+    link1Url: "",
+    link2Label: "",
+    link2Url: "",
+    link3Label: "",
+    link3Url: "",
+    link4Label: "",
+    link4Url: ""
+  },
+  render: (props) => {
+    const links = [
+      [props.link1Label, props.link1Url],
+      [props.link2Label, props.link2Url],
+      [props.link3Label, props.link3Url],
+      [props.link4Label, props.link4Url]
+    ].filter(([label, url]) => label && url);
+    if (links.length === 0) return /* @__PURE__ */ jsx30(Fragment5, {});
+    return /* @__PURE__ */ jsx30("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", padding: "0.5rem 0" }, children: links.map(([label, url], i) => /* @__PURE__ */ jsx30(
+      "a",
+      {
+        href: url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: { color: "#2c5530", textDecoration: "none", fontWeight: 500, fontSize: "0.95rem" },
+        children: label
+      },
+      i
+    )) });
+  }
+};
+
+// src/components/cms/TabContent.tsx
+import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+var TabContent = {
+  label: "Tab Content",
+  fields: {
+    tabLabel: { type: "text", label: "Tab Label" },
+    content: { type: "textarea", label: "Content (HTML)" }
+  },
+  defaultProps: { tabLabel: "", content: "" },
+  render: ({ tabLabel, content }) => {
+    if (!content) return /* @__PURE__ */ jsx31(Fragment6, {});
+    return /* @__PURE__ */ jsxs23("div", { style: { padding: "1.5rem 0", lineHeight: 1.6, color: "#333" }, children: [
+      tabLabel && /* @__PURE__ */ jsx31("h3", { style: { marginBottom: "1rem" }, children: tabLabel }),
+      /* @__PURE__ */ jsx31("div", { dangerouslySetInnerHTML: { __html: content } })
+    ] });
+  }
+};
+
+// src/components/cms/TestimonialsSlider.tsx
+import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+var TestimonialsSlider = {
+  label: "Testimonials",
+  fields: {
+    quote1: { type: "textarea", label: "Quote 1" },
+    author1: { type: "text", label: "Author 1" },
+    role1: { type: "text", label: "Role 1" },
+    quote2: { type: "textarea", label: "Quote 2" },
+    author2: { type: "text", label: "Author 2" },
+    role2: { type: "text", label: "Role 2" },
+    quote3: { type: "textarea", label: "Quote 3" },
+    author3: { type: "text", label: "Author 3" },
+    role3: { type: "text", label: "Role 3" }
+  },
+  defaultProps: {
+    quote1: "",
+    author1: "",
+    role1: "",
+    quote2: "",
+    author2: "",
+    role2: "",
+    quote3: "",
+    author3: "",
+    role3: ""
+  },
+  render: (props) => {
+    const items = [
+      [props.quote1, props.author1, props.role1],
+      [props.quote2, props.author2, props.role2],
+      [props.quote3, props.author3, props.role3]
+    ].filter(([q]) => q);
+    if (items.length === 0) return /* @__PURE__ */ jsx32(Fragment7, {});
+    return /* @__PURE__ */ jsx32("div", { style: { padding: "2rem 1rem", background: "#f9f9f9", borderRadius: "8px", margin: "1rem 0" }, children: items.map(([quote, author, role], i) => /* @__PURE__ */ jsxs24("div", { style: { marginBottom: i < items.length - 1 ? "2rem" : 0 }, children: [
+      /* @__PURE__ */ jsx32(
+        "blockquote",
+        {
+          style: {
+            fontSize: "1.15rem",
+            fontStyle: "italic",
+            color: "#444",
+            margin: "0 0 0.75rem 0",
+            paddingLeft: "1rem",
+            borderLeft: "4px solid #2c5530"
+          },
+          children: quote
+        }
+      ),
+      author && /* @__PURE__ */ jsxs24("cite", { style: { fontStyle: "normal", fontSize: "0.95rem", fontWeight: 600, color: "#333" }, children: [
+        "\u2014 ",
+        author,
+        role && /* @__PURE__ */ jsxs24("span", { style: { fontWeight: "normal", color: "#666" }, children: [
+          " (",
+          role,
+          ")"
+        ] })
+      ] })
+    ] }, i)) });
+  }
+};
+
+// src/components/cms/ThankYouContent.tsx
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+var ThankYouContent = {
+  label: "Thank You Content",
+  fields: {
+    headline: { type: "text", label: "Headline" },
+    message: { type: "textarea", label: "Message (HTML)" },
+    ctaText: { type: "text", label: "CTA Text" },
+    ctaLink: { type: "text", label: "CTA Link" }
+  },
+  defaultProps: { headline: "Thank you for your order!", message: "", ctaText: "", ctaLink: "" },
+  render: ({ headline, message, ctaText, ctaLink }) => /* @__PURE__ */ jsxs25("div", { style: { textAlign: "center", padding: "3rem 1rem", maxWidth: "560px", margin: "0 auto" }, children: [
+    headline && /* @__PURE__ */ jsx33("h1", { style: { fontSize: "2rem", color: "#2c5530", marginBottom: "1rem" }, children: headline }),
+    message && /* @__PURE__ */ jsx33(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: message },
+        style: { fontSize: "1rem", lineHeight: 1.6, color: "#555", marginBottom: "2rem" }
+      }
+    ),
+    ctaText && ctaLink && /* @__PURE__ */ jsx33(
+      "a",
+      {
+        href: ctaLink,
+        style: {
+          display: "inline-block",
+          background: "#2c5530",
+          color: "white",
+          padding: "0.75rem 2rem",
+          borderRadius: "4px",
+          textDecoration: "none",
+          fontWeight: 600
+        },
+        children: ctaText
+      }
+    )
+  ] })
+};
+
+// src/components/cms/TrustBadges.tsx
+import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+var iconField = (label) => ({
+  type: "custom",
+  label,
+  render: ({ value, onChange }) => /* @__PURE__ */ jsx34(ImagePickerField, { value: value ?? "", onChange })
+});
+var TrustBadges = {
+  label: "Trust Badges",
+  fields: {
+    badge1Icon: iconField("Badge 1 Icon"),
+    badge1Label: { type: "text", label: "Badge 1 Label" },
+    badge2Icon: iconField("Badge 2 Icon"),
+    badge2Label: { type: "text", label: "Badge 2 Label" },
+    badge3Icon: iconField("Badge 3 Icon"),
+    badge3Label: { type: "text", label: "Badge 3 Label" },
+    badge4Icon: iconField("Badge 4 Icon"),
+    badge4Label: { type: "text", label: "Badge 4 Label" }
+  },
+  defaultProps: {
+    badge1Icon: "",
+    badge1Label: "",
+    badge2Icon: "",
+    badge2Label: "",
+    badge3Icon: "",
+    badge3Label: "",
+    badge4Icon: "",
+    badge4Label: ""
+  },
+  render: (props) => {
+    const badges = [
+      [props.badge1Icon, props.badge1Label],
+      [props.badge2Icon, props.badge2Label],
+      [props.badge3Icon, props.badge3Label],
+      [props.badge4Icon, props.badge4Label]
+    ].filter(([, label]) => label);
+    if (badges.length === 0) return /* @__PURE__ */ jsx34(Fragment8, {});
+    return /* @__PURE__ */ jsx34(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          justifyContent: "center",
+          gap: "2rem",
+          padding: "2rem 1rem",
+          background: "#f9f9f9",
+          borderRadius: "4px"
+        },
+        children: badges.map(([icon, label], i) => /* @__PURE__ */ jsxs26("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
+          icon && /* @__PURE__ */ jsx34(
+            "img",
+            {
+              src: icon,
+              alt: label,
+              style: { width: "40px", height: "40px", objectFit: "contain" }
+            }
+          ),
+          /* @__PURE__ */ jsx34("span", { style: { fontSize: "0.95rem", fontWeight: 500, color: "#333" }, children: label })
+        ] }, i))
+      }
+    );
+  }
+};
+
+// src/components/cms/VideoBlock.tsx
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+var VideoBlock = {
+  label: "Video Block",
+  fields: {
+    videoUrl: { type: "text", label: "Video URL" },
+    posterImage: {
+      type: "custom",
+      label: "Poster Image",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx35(ImagePickerField, { value: value ?? "", onChange })
+    },
+    title: { type: "text", label: "Title" },
+    caption: { type: "text", label: "Caption" }
+  },
+  defaultProps: { videoUrl: "", posterImage: "", title: "", caption: "" },
+  render: ({ videoUrl, posterImage, title, caption }) => {
+    if (!videoUrl) return /* @__PURE__ */ jsx35("div", { style: { padding: "2rem", textAlign: "center", color: "#999", background: "#f5f5f5", borderRadius: "8px" }, children: "No video URL configured" });
+    return /* @__PURE__ */ jsxs27("div", { style: { margin: "1.5rem 0" }, children: [
+      /* @__PURE__ */ jsx35(
+        "div",
+        {
+          style: {
+            position: "relative",
+            paddingBottom: "56.25%",
+            height: 0,
+            overflow: "hidden",
+            background: "#000",
+            borderRadius: "8px"
+          },
+          children: /* @__PURE__ */ jsx35(
+            "video",
+            {
+              src: videoUrl,
+              poster: posterImage || void 0,
+              controls: true,
+              preload: "metadata",
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                objectFit: "contain"
+              }
+            }
+          )
+        }
+      ),
+      title && /* @__PURE__ */ jsx35("h4", { style: { marginTop: "0.75rem", fontSize: "1.1rem", color: "#333" }, children: title }),
+      caption && /* @__PURE__ */ jsx35("p", { style: { fontSize: "0.9rem", color: "#666", marginTop: "0.25rem" }, children: caption })
+    ] });
+  }
+};
+
+// src/components/cms/WebsiteLogo.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+var WebsiteLogo = {
+  label: "Website Logo",
+  fields: {
+    logo: {
+      type: "custom",
+      label: "Logo",
+      render: ({ value, onChange }) => /* @__PURE__ */ jsx36(ImagePickerField, { value: value ?? "", onChange })
+    },
+    maxWidth: { type: "text", label: "Max Width (px)" },
+    maxHeight: { type: "text", label: "Max Height (px)" }
+  },
+  defaultProps: { logo: "", maxWidth: "180", maxHeight: "50" },
+  render: ({ logo, maxWidth, maxHeight }) => {
+    if (!logo) return /* @__PURE__ */ jsx36("div", { style: { width: `${parseInt(maxWidth, 10) || 180}px`, height: `${parseInt(maxHeight, 10) || 50}px`, background: "#f0f0f0", borderRadius: "4px" } });
+    return /* @__PURE__ */ jsx36(
+      "div",
+      {
+        style: {
+          maxWidth: `${parseInt(maxWidth, 10) || 180}px`,
+          maxHeight: `${parseInt(maxHeight, 10) || 50}px`
+        },
+        children: /* @__PURE__ */ jsx36(
+          "img",
+          {
+            src: logo,
+            alt: "Logo",
+            style: { width: "100%", height: "100%", objectFit: "contain" }
+          }
+        )
+      }
+    );
+  }
+};
+
+// src/config/defaultPuckConfig.ts
+var defaultPuckConfig = {
+  components: {
+    Hero,
+    RichText,
+    Columns,
+    Image,
+    Button,
+    Card,
+    Spacer,
+    ProductTeaser,
+    // CMS components
+    HeroBanner,
+    TextBlock,
+    CategoryGrid,
+    CategoryHero,
+    CheckoutPromoBanner,
+    CountdownBanner,
+    CrossSellBlock,
+    DeliveryMessage,
+    Divider,
+    EmptyState,
+    FAQAccordion,
+    FooterBlock,
+    ImageBlock,
+    NewsletterSignup,
+    ProductBanner,
+    ProductGridHeader,
+    ProductSlider,
+    PromotionalBanner,
+    RelatedProductsSlider,
+    SocialLinks,
+    TabContent,
+    TestimonialsSlider,
+    ThankYouContent,
+    TrustBadges,
+    VideoBlock,
+    WebsiteLogo
+  },
+  root: {
+    fields: {
+      title: { type: "text", label: "Page Title" },
+      backgroundColor: { type: "text", label: "Background Color (CSS)" }
+    },
+    defaultProps: {
+      title: "New Page",
+      backgroundColor: "#ffffff"
+    },
+    render: ({ children, backgroundColor }) => React4.createElement(
+      "div",
+      {
+        style: {
+          background: backgroundColor ?? "#ffffff",
+          minHeight: "100vh",
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+        }
+      },
+      children
+    )
+  }
+};
+
+// src/toolbar/EditorToolbar.tsx
+import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+var BADGE_STYLES = {
+  saving: { bg: "rgba(251, 191, 36, 0.12)", color: "var(--status-saving)", border: "rgba(251, 191, 36, 0.3)" },
+  unsaved: { bg: "rgba(100, 116, 139, 0.12)", color: "var(--text-muted)", border: "rgba(100, 116, 139, 0.3)" },
+  draft: { bg: "rgba(129, 140, 248, 0.12)", color: "var(--status-draft)", border: "rgba(129, 140, 248, 0.3)" },
+  published: { bg: "rgba(6, 214, 160, 0.12)", color: "var(--status-published)", border: "rgba(6, 214, 160, 0.3)" }
+};
+var StatusBadge = ({ label, variant }) => {
+  const s3 = BADGE_STYLES[variant];
+  return /* @__PURE__ */ jsx37(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        padding: "2px 10px",
+        borderRadius: "12px",
+        fontSize: "12px",
+        fontWeight: 600,
+        background: s3.bg,
+        color: s3.color,
+        border: `1px solid ${s3.border}`
+      },
+      children: label
+    }
+  );
+};
+var EditorToolbar = ({
+  saving,
+  isDirty,
+  states,
+  onSave,
+  onPublish,
+  onRevert,
+  showPublishButton
+}) => {
+  const hasDraft = Boolean(states.draft);
+  const hasPublished = Boolean(states.published);
+  return /* @__PURE__ */ jsxs28(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        flexWrap: "wrap"
+      },
+      children: [
+        /* @__PURE__ */ jsxs28("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          saving && /* @__PURE__ */ jsx37(StatusBadge, { label: "Saving\u2026", variant: "saving" }),
+          !saving && isDirty && /* @__PURE__ */ jsx37(StatusBadge, { label: "Unsaved", variant: "unsaved" }),
+          !saving && !isDirty && hasDraft && /* @__PURE__ */ jsx37(StatusBadge, { label: "Draft", variant: "draft" }),
+          hasPublished && /* @__PURE__ */ jsx37(StatusBadge, { label: "Published", variant: "published" })
+        ] }),
+        hasDraft && hasPublished && /* @__PURE__ */ jsx37(
+          "button",
+          {
+            onClick: onRevert,
+            disabled: saving,
+            style: {
+              padding: "6px 14px",
+              borderRadius: "4px",
+              border: "1px solid var(--border-glow)",
+              background: "transparent",
+              color: "var(--text-muted)",
+              fontWeight: 500,
+              fontSize: "13px",
+              cursor: saving ? "not-allowed" : "pointer",
+              opacity: saving ? 0.5 : 1
+            },
+            children: "Revert to Published"
+          }
+        ),
+        /* @__PURE__ */ jsx37(
+          "button",
+          {
+            onClick: onSave,
+            disabled: !isDirty || saving,
+            style: {
+              padding: "6px 14px",
+              borderRadius: "4px",
+              border: "1px solid var(--border-glow)",
+              background: "transparent",
+              color: "var(--text-muted)",
+              fontWeight: 500,
+              fontSize: "13px",
+              cursor: !isDirty || saving ? "not-allowed" : "pointer",
+              opacity: !isDirty || saving ? 0.4 : 1
+            },
+            children: "Save"
+          }
+        ),
+        showPublishButton && /* @__PURE__ */ jsx37(
+          "button",
+          {
+            onClick: onPublish,
+            disabled: saving,
+            style: {
+              padding: "6px 16px",
+              borderRadius: "4px",
+              border: "1px solid var(--accent-cyan)",
+              background: "rgba(0, 212, 255, 0.1)",
+              color: "var(--accent-cyan)",
+              fontWeight: 600,
+              fontSize: "13px",
+              cursor: saving ? "not-allowed" : "pointer",
+              opacity: saving ? 0.5 : 1,
+              boxShadow: "0 0 12px rgba(0, 212, 255, 0.15)"
+            },
+            children: hasPublished ? "Re-publish" : "Publish"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/overrides/ComponentListSearch.tsx
+import { createContext, useContext, useState as useState4 } from "react";
+import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+var ComponentSearchContext = createContext({
+  search: "",
+  setSearch: () => {
+  }
+});
+var ComponentSearchProvider = ({ children }) => {
+  const [search, setSearch] = useState4("");
+  return /* @__PURE__ */ jsx38(ComponentSearchContext.Provider, { value: { search, setSearch }, children });
+};
+var ComponentsPanel = ({ children }) => {
+  const { search, setSearch } = useContext(ComponentSearchContext);
+  return /* @__PURE__ */ jsxs29("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsx38("style", { children: `[data-puck-dnd] > div:has([data-hidden-component]) { display: none !important; }` }),
+    /* @__PURE__ */ jsx38(
+      "div",
+      {
+        style: {
+          flexShrink: 0,
+          padding: "0",
+          margin: "12px 0",
+          background: "var(--puck-color-white, #fff)",
+          position: "sticky",
+          top: 0,
+          zIndex: 1
+        },
+        children: /* @__PURE__ */ jsx38(
+          "input",
+          {
+            type: "search",
+            placeholder: "Search components\u2026",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            style: {
+              width: "100%",
+              boxSizing: "border-box",
+              padding: "6px 10px",
+              borderRadius: "4px",
+              border: "1px solid var(--puck-color-grey-08, #d1d5db)",
+              background: "var(--puck-color-white, #fff)",
+              fontSize: "13px",
+              outline: "none",
+              color: "inherit"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx38("div", { style: { flex: 1, overflowY: "auto" }, children })
+  ] });
+};
+var ComponentItemFilter = ({
+  children,
+  name
+}) => {
+  const { search } = useContext(ComponentSearchContext);
+  const isHidden = search.trim() !== "" && !name.toLowerCase().includes(search.toLowerCase());
+  if (isHidden) {
+    return /* @__PURE__ */ jsx38("span", { "data-hidden-component": true });
+  }
+  return /* @__PURE__ */ jsx38(Fragment9, { children });
+};
+
+// src/PuckEditor.tsx
+import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+var PuckEditorInner = ({
+  pageKey,
+  config,
+  onPublish,
+  onSave,
+  onError,
+  showPublishButton,
+  autoSaveDebounceMs: _autoSaveDebounceMs
+}) => {
+  const {
+    page,
+    states,
+    saving,
+    loading,
+    error,
+    saveDraft,
+    publish,
+    revertToPublished
+  } = usePuckPage(pageKey);
+  const latestDataRef = useRef2(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState5(false);
+  const handleChange = useCallback2((data) => {
+    latestDataRef.current = data;
+    setHasUnsavedChanges(true);
+  }, []);
+  const handleSave = useCallback2(async () => {
+    const data = latestDataRef.current;
+    if (!data) return;
+    try {
+      await saveDraft(data);
+      setHasUnsavedChanges(false);
+      onSave?.(data);
+    } catch (err) {
+      onError?.(err);
+    }
+  }, [saveDraft, onSave, onError]);
+  const handlePublish = useCallback2(
+    async (data) => {
+      try {
+        await saveDraft(data);
+        setHasUnsavedChanges(false);
+        await publish(false);
+        onPublish?.(data);
+      } catch (err) {
+        onError?.(err);
+      }
+    },
+    [saveDraft, publish, onPublish, onError]
+  );
+  const handleRevert = useCallback2(async () => {
+    try {
+      await revertToPublished();
+      setHasUnsavedChanges(false);
+    } catch (err) {
+      onError?.(err);
+    }
+  }, [revertToPublished, onError]);
+  if (loading) {
+    return /* @__PURE__ */ jsx39(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100vh",
+          fontSize: "16px",
+          color: "var(--text-muted)",
+          background: "var(--bg-void)"
+        },
+        children: "Loading editor\u2026"
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs30(
+      "div",
+      {
+        style: {
+          padding: "32px",
+          color: "var(--status-error)",
+          background: "rgba(248, 113, 113, 0.08)",
+          border: "1px solid rgba(248, 113, 113, 0.25)",
+          borderRadius: "8px",
+          margin: "16px"
+        },
+        children: [
+          /* @__PURE__ */ jsx39("strong", { children: "Error loading page:" }),
+          " ",
+          error
+        ]
+      }
+    );
+  }
+  const activeData = states.draft?.puckData ?? page?.puckData ?? {
+    content: [],
+    root: { props: {} }
+  };
+  return /* @__PURE__ */ jsx39(ComponentSearchProvider, { children: /* @__PURE__ */ jsx39(
+    Puck,
+    {
+      config,
+      data: activeData,
+      onChange: handleChange,
+      onPublish: handlePublish,
+      overrides: {
+        headerActions: () => /* @__PURE__ */ jsx39(
+          EditorToolbar,
+          {
+            saving,
+            isDirty: hasUnsavedChanges,
+            states,
+            onSave: () => void handleSave(),
+            onPublish: () => void handlePublish(activeData),
+            onRevert: () => void handleRevert(),
+            showPublishButton
+          }
+        ),
+        components: ({ children }) => /* @__PURE__ */ jsx39(ComponentsPanel, { children }),
+        componentItem: ({ children, name }) => /* @__PURE__ */ jsx39(ComponentItemFilter, { name, children })
+      }
+    }
+  ) });
+};
+var PuckEditor = ({
+  baseURL,
+  projectKey,
+  businessUnitKey,
+  jwtToken,
+  pageKey,
+  config = defaultPuckConfig,
+  onPublish,
+  onSave,
+  onError,
+  showPublishButton = true,
+  autoSaveDebounceMs = 1500
+}) => {
+  return /* @__PURE__ */ jsx39(
+    PuckApiProvider,
+    {
+      baseURL,
+      projectKey,
+      businessUnitKey,
+      jwtToken,
+      children: /* @__PURE__ */ jsx39(
+        PuckEditorInner,
+        {
+          pageKey,
+          config,
+          onPublish,
+          onSave,
+          onError,
+          showPublishButton,
+          autoSaveDebounceMs
+        }
+      )
+    }
+  );
+};
+export {
+  Button,
+  Card,
+  CategoryGrid,
+  CategoryHero,
+  CheckoutPromoBanner,
+  Columns,
+  ComponentItemFilter,
+  ComponentSearchProvider,
+  ComponentsPanel,
+  CountdownBanner,
+  CrossSellBlock,
+  DatasourceField,
+  DeliveryMessage,
+  Divider,
+  EditorToolbar,
+  EmptyState,
+  FAQAccordion,
+  FooterBlock,
+  Hero,
+  HeroBanner,
+  Image,
+  ImageBlock,
+  ImagePickerField,
+  NewsletterSignup,
+  ProductBanner,
+  ProductGridHeader,
+  ProductSlider,
+  ProductTeaser,
+  PromotionalBanner,
+  PuckEditor,
+  RelatedProductsSlider,
+  RichText,
+  SocialLinks,
+  Spacer,
+  TabContent,
+  TestimonialsSlider,
+  TextBlock,
+  ThankYouContent,
+  TrustBadges,
+  VideoBlock,
+  WebsiteLogo,
+  defaultPuckConfig
+};
+//# sourceMappingURL=index.mjs.map