dune-react 0.0.31 → 0.0.32

package/dist/components/puck-base/article-card.d.ts

@@ -1,7 +1,7 @@
 import { CompoundButtonProps } from "./button";
-import { CompoundImageProps } from "./image";
+import { CompoundMediaProps } from "./media";
 export interface CompoundArticleCardProps {
-    image?: CompoundImageProps;
+    image?: CompoundMediaProps;
     heading?: string;
     description?: string;
     button?: CompoundButtonProps;

package/dist/components/puck-base/article-card.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/css-utils.js";
 import { CompoundButton } from "./button.js";
-import { CompoundImage } from "./image.js";
+import { CompoundMedia } from "./media.js";
 const CompoundArticleCard = ({
   image,
   heading,
@@ -10,7 +10,7 @@ const CompoundArticleCard = ({
   className
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", className), children: [
-    image && /* @__PURE__ */ jsx("div", { className: "bg-muted mb-2 aspect-video overflow-hidden rounded-md [&>span]:h-full [&>span]:w-full", children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src || "", alt: image.alt, className: "h-full w-full object-cover" }) }),
+    image && /* @__PURE__ */ jsx("div", { className: "bg-muted mb-2 aspect-video overflow-hidden rounded-md [&>span]:h-full [&>span]:w-full", children: /* @__PURE__ */ jsx(CompoundMedia, { src: image.src || "", alt: image.alt, className: "h-full w-full object-cover" }) }),
     !!heading || !!description || !!button ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
       heading ? /* @__PURE__ */ jsx("h3", { className: "text-xl tracking-tight", children: heading }) : null,
       description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-xs text-base", children: description }) : null,

package/dist/components/puck-base/card.d.ts

@@ -1,8 +1,8 @@
 import { IconName } from "@/components/puck-core/core/types";
 import { CompoundButtonProps } from "./button";
-import { CompoundImageProps } from "./image";
+import { CompoundMediaProps } from "./media";
 export interface CompoundCardProps {
-    image?: CompoundImageProps;
+    image?: CompoundMediaProps;
     icon?: IconName;
     heading?: string;
     description?: string;

package/dist/components/puck-base/card.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { SafeDynamicIcon } from "./safe-dynamic-icon.js";
 import { cn } from "../../utils/css-utils.js";
 import { CompoundButton } from "./button.js";
-import { CompoundImage } from "./image.js";
+import { CompoundMedia } from "./media.js";
 const CompoundCard = ({
   image,
   icon,
@@ -30,7 +30,7 @@ const CompoundCard = ({
         className
       ),
       children: [
-        hasImage ? /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-t-md", children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "h-full" }) }) : null,
+        hasImage ? /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-t-md", children: /* @__PURE__ */ jsx(CompoundMedia, { src: image.src, alt: image.alt, className: "h-full" }) }) : null,
         hasIcon && !hasImage ? /* @__PURE__ */ jsx(
           SafeDynamicIcon,
           {

package/dist/components/puck-base/index.d.ts

@@ -5,7 +5,8 @@ export { CompoundContainer, type CompoundContainerProps, type SectionStyle, type
 export { CompoundContent, type CompoundContentProps } from "./content";
 export { CompoundField, type CompoundFieldProps, fieldTypes, type FieldTypes } from "./field";
 export { CompoundForm, type CompoundFormProps, formMethods, type FormMethods } from "./form";
-export { CompoundImage, type CompoundImageProps } from "./image";
+export { CompoundMedia, type CompoundMediaProps } from "./media";
 export { CompoundArticleCard, type CompoundArticleCardProps } from "./article-card";
 export { GradientText, type GradientTextProps } from "./gradient-text";
 export { SafeDynamicIcon } from "./safe-dynamic-icon";
+export { CompoundSocialLinks, type CompoundSocialLinksProps } from "./social-links";

package/dist/components/puck-base/media.d.ts

@@ -0,0 +1,12 @@
+export declare function detectMediaType(src: string): "image" | "video" | "embed";
+export interface CompoundMediaProps {
+    src: string;
+    alt?: string;
+    className?: string;
+    /** Only effective when src resolves to video type */
+    videoAutoplay?: boolean;
+    videoLoop?: boolean;
+    videoMuted?: boolean;
+    videoPoster?: string;
+}
+export declare const CompoundMedia: (props: CompoundMediaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-base/media.js

@@ -0,0 +1,576 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import Cropper from "react-easy-crop";
+import { Pencil, Film, Youtube, Search, Upload, Loader2, Check } from "lucide-react";
+import { cn } from "../../utils/css-utils.js";
+import { withEditable } from "../puck-core/core/with-editable.js";
+import { mediaField } from "../puck-core/core/props/media.js";
+import { Button } from "../shadcn/button.js";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../shadcn/dialog.js";
+import { Input } from "../shadcn/input.js";
+import { Label } from "../shadcn/label.js";
+import { ScrollArea } from "../shadcn/scroll-area.js";
+import { Slider } from "../shadcn/slider.js";
+import { Tabs, TabsList, TabsTrigger, TabsIndicator, TabsContent } from "../shadcn/tabs.js";
+import useUpload from "../puck-core/use-upload.js";
+import { useEditorContext } from "../puck-core/core/context/editor-context.js";
+import { VideoIframe } from "../shadcn/video-iframe.js";
+function detectMediaType(src) {
+  if (/youtube\.com|youtu\.be|vimeo\.com/i.test(src)) return "embed";
+  if (/\.(mp4|webm|mov|ogg)(\?.*)?$/i.test(src)) return "video";
+  return "image";
+}
+function getEmbedUrl(url) {
+  const ytMatch = url.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/
+  );
+  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}?autoplay=1`;
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
+  if (vimeoMatch)
+    return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`;
+  return url;
+}
+const createImage = (url) => new Promise((resolve, reject) => {
+  const image = new Image();
+  image.addEventListener("load", () => resolve(image));
+  image.addEventListener("error", (error) => reject(error));
+  image.setAttribute("crossOrigin", "anonymous");
+  image.src = url;
+});
+const getCroppedImg = async (imageSrc, pixelCrop, rotation) => {
+  const image = await createImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const maxSize = Math.max(image.width, image.height);
+  const safeArea = 2 * (maxSize / 2 * Math.sqrt(2));
+  canvas.width = safeArea;
+  canvas.height = safeArea;
+  ctx.translate(safeArea / 2, safeArea / 2);
+  ctx.rotate(rotation * Math.PI / 180);
+  ctx.translate(-safeArea / 2, -safeArea / 2);
+  ctx.drawImage(
+    image,
+    safeArea / 2 - image.width * 0.5,
+    safeArea / 2 - image.height * 0.5
+  );
+  const data = ctx.getImageData(0, 0, safeArea, safeArea);
+  canvas.width = pixelCrop.width;
+  canvas.height = pixelCrop.height;
+  ctx.putImageData(
+    data,
+    Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),
+    Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)
+  );
+  return new Promise((resolve) => {
+    canvas.toBlob((blob) => resolve(blob), "image/jpeg", 0.95);
+  });
+};
+const DEFAULT_LIBRARY_IMAGES = [];
+function CompoundMediaBase(props) {
+  const type = detectMediaType(props.src);
+  const { isEditor } = useEditorContext();
+  switch (type) {
+    case "embed":
+      return /* @__PURE__ */ jsx(
+        VideoIframe,
+        {
+          video: props.src,
+          autoplay: !isEditor,
+          className: cn("block h-full w-full", props.className)
+        }
+      );
+    case "video":
+      return /* @__PURE__ */ jsx(
+        "video",
+        {
+          src: props.src,
+          poster: props.videoPoster,
+          autoPlay: isEditor ? false : props.videoAutoplay ?? true,
+          loop: props.videoLoop ?? true,
+          muted: props.videoMuted ?? true,
+          playsInline: true,
+          className: cn("block h-full w-full object-cover", props.className)
+        }
+      );
+    case "image":
+    default:
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: props.src,
+          alt: props.alt,
+          className: cn("block h-full w-full", props.className)
+        }
+      );
+  }
+}
+function MediaEditDialog({
+  open,
+  onOpenChange,
+  initialData,
+  onSave
+}) {
+  const currentType = detectMediaType(initialData.src);
+  const [mediaTab, setMediaTab] = useState(currentType);
+  const [imageSubTab, setImageSubTab] = useState("library");
+  const [alt, setAlt] = useState(initialData.alt ?? "");
+  const [libraryImages, setLibraryImages] = useState(
+    DEFAULT_LIBRARY_IMAGES
+  );
+  const [isLoadingImages, setIsLoadingImages] = useState(false);
+  const { fetchLibraryImages } = useEditorContext();
+  useEffect(() => {
+    if (!open || !fetchLibraryImages) return;
+    setIsLoadingImages(true);
+    fetchLibraryImages().then((images) => {
+      if (images.length > 0) setLibraryImages(images);
+    }).catch(() => {
+    }).finally(() => setIsLoadingImages(false));
+  }, [open, fetchLibraryImages]);
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [rotation, setRotation] = useState(0);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+  const [selectedImg, setSelectedImg] = useState(null);
+  const replaceInputRef = useRef(null);
+  const lastUploadedFile = useRef(null);
+  const [videoUrl, setVideoUrl] = useState(
+    currentType === "video" ? initialData.src : ""
+  );
+  const [embedUrl, setEmbedUrl] = useState(
+    currentType === "embed" ? initialData.src : ""
+  );
+  const { brandId, domain } = useEditorContext();
+  const saveToAssetLibrary = useCallback(
+    async (fileUrl, file) => {
+      var _a;
+      if (!domain) return;
+      try {
+        const fileName = (file == null ? void 0 : file.name) || fileUrl.split("/").pop() || "uploaded-media";
+        const isVideo = ((_a = file == null ? void 0 : file.type) == null ? void 0 : _a.startsWith("video/")) || detectMediaType(fileUrl) === "video";
+        const params = new URLSearchParams();
+        if (brandId) params.set("brandId", brandId);
+        await fetch(`${domain}/api/user-assets?${params}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({
+            title: fileName,
+            type: isVideo ? "video" : "image",
+            label: "raw",
+            source_type: "user-upload",
+            file: fileUrl,
+            file_size: (file == null ? void 0 : file.size) || 0
+          })
+        });
+      } catch (e) {
+        console.error("[MediaEditDialog] Failed to save asset:", e);
+      }
+    },
+    [brandId, domain]
+  );
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+    setCrop({ x: 0, y: 0 });
+    setZoom(1);
+    setRotation(0);
+    setSelectedImg(null);
+    setVideoUrl("");
+    setEmbedUrl("");
+  }, [onOpenChange]);
+  const { upload: uploadCrop, isUploading: isCropUploading } = useUpload({
+    onSuccess: (url) => {
+      saveToAssetLibrary(url);
+      onSave({ src: url, alt });
+      handleClose();
+    }
+  });
+  const { upload: uploadReplace, isUploading: isReplaceUploading } = useUpload({
+    onSuccess: (url) => {
+      saveToAssetLibrary(url, lastUploadedFile.current ?? void 0);
+      onSave({ src: url, alt });
+      handleClose();
+    }
+  });
+  const handleCropSave = useCallback(async () => {
+    if (!croppedAreaPixels || !initialData.src) return;
+    try {
+      const croppedBlob = await getCroppedImg(
+        initialData.src,
+        croppedAreaPixels,
+        rotation
+      );
+      const file = new File([croppedBlob], "cropped-image.jpg", {
+        type: "image/jpeg"
+      });
+      await uploadCrop(file);
+    } catch (error) {
+      console.error("Crop failed:", error);
+    }
+  }, [croppedAreaPixels, initialData.src, rotation, uploadCrop]);
+  const handleFileReplace = useCallback(
+    (e) => {
+      var _a;
+      const file = (_a = e.target.files) == null ? void 0 : _a[0];
+      if (file) {
+        lastUploadedFile.current = file;
+        uploadReplace(file);
+      }
+      e.target.value = "";
+    },
+    [uploadReplace]
+  );
+  const handleLibraryDone = useCallback(() => {
+    if (!selectedImg) return;
+    onSave({ src: selectedImg, alt });
+    handleClose();
+  }, [selectedImg, alt, onSave, handleClose]);
+  const handleVideoDone = useCallback(() => {
+    const url = videoUrl.trim();
+    if (!url) return;
+    onSave({ src: url, alt });
+    handleClose();
+  }, [videoUrl, alt, onSave, handleClose]);
+  const handleEmbedDone = useCallback(() => {
+    const url = embedUrl.trim();
+    if (!url) return;
+    onSave({ src: url, alt });
+    handleClose();
+  }, [embedUrl, alt, onSave, handleClose]);
+  const canDone = useMemo(() => {
+    if (mediaTab === "image") {
+      if (imageSubTab === "library") return !!selectedImg;
+      if (imageSubTab === "adjust") return !isCropUploading;
+      return true;
+    }
+    if (mediaTab === "video") return !!videoUrl.trim();
+    if (mediaTab === "embed") return !!embedUrl.trim();
+    return false;
+  }, [mediaTab, imageSubTab, selectedImg, isCropUploading, videoUrl, embedUrl]);
+  const handleDone = useCallback(() => {
+    if (mediaTab === "image") {
+      if (imageSubTab === "library") handleLibraryDone();
+      else if (imageSubTab === "adjust") handleCropSave();
+      else {
+        onSave({ alt });
+        handleClose();
+      }
+    } else if (mediaTab === "video") {
+      handleVideoDone();
+    } else if (mediaTab === "embed") {
+      handleEmbedDone();
+    }
+  }, [
+    mediaTab,
+    imageSubTab,
+    handleLibraryDone,
+    handleCropSave,
+    handleVideoDone,
+    handleEmbedDone,
+    onSave,
+    alt,
+    handleClose
+  ]);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (o) => !o && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex max-h-[80vh] max-w-lg flex-col gap-0 overflow-hidden p-0", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { className: "px-6 pt-5 pb-0", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-base font-semibold", children: "Edit Media" }) }),
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        value: mediaTab,
+        onValueChange: (v) => setMediaTab(v),
+        className: "flex flex-1 flex-col overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxs(TabsList, { variant: "line", className: "relative mx-6 mt-3", children: [
+            /* @__PURE__ */ jsxs(TabsTrigger, { value: "image", children: [
+              /* @__PURE__ */ jsx(Pencil, { className: "size-3.5" }),
+              "Image"
+            ] }),
+            /* @__PURE__ */ jsxs(TabsTrigger, { value: "video", children: [
+              /* @__PURE__ */ jsx(Film, { className: "size-3.5" }),
+              "Video"
+            ] }),
+            /* @__PURE__ */ jsxs(TabsTrigger, { value: "embed", children: [
+              /* @__PURE__ */ jsx(Youtube, { className: "size-3.5" }),
+              "YouTube"
+            ] }),
+            /* @__PURE__ */ jsx(TabsIndicator, {})
+          ] }),
+          /* @__PURE__ */ jsx(
+            TabsContent,
+            {
+              value: "image",
+              className: "animate-tabs flex-none h-[360px] flex flex-col overflow-hidden",
+              children: /* @__PURE__ */ jsxs(
+                Tabs,
+                {
+                  value: imageSubTab,
+                  onValueChange: (v) => setImageSubTab(v),
+                  orientation: "vertical",
+                  className: "flex flex-1 overflow-hidden",
+                  children: [
+                    /* @__PURE__ */ jsxs(TabsList, { className: "ml-6 mt-3", children: [
+                      /* @__PURE__ */ jsxs(TabsTrigger, { value: "adjust", children: [
+                        /* @__PURE__ */ jsx(Pencil, {}),
+                        "Crop"
+                      ] }),
+                      /* @__PURE__ */ jsxs(TabsTrigger, { value: "library", children: [
+                        /* @__PURE__ */ jsx(Search, {}),
+                        "Library"
+                      ] }),
+                      /* @__PURE__ */ jsxs(TabsTrigger, { value: "upload", children: [
+                        /* @__PURE__ */ jsx(Upload, {}),
+                        "Upload"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      TabsContent,
+                      {
+                        value: "adjust",
+                        className: "m-3 bg-muted rounded-lg animate-tabs flex flex-col",
+                        children: [
+                          /* @__PURE__ */ jsx("div", { className: "bg-muted relative h-64", children: /* @__PURE__ */ jsx(
+                            Cropper,
+                            {
+                              image: currentType === "image" ? initialData.src : "",
+                              crop,
+                              zoom,
+                              rotation,
+                              aspect: 16 / 9,
+                              onCropChange: setCrop,
+                              onZoomChange: setZoom,
+                              onRotationChange: setRotation,
+                              onCropComplete: (_, pixels) => setCroppedAreaPixels(pixels)
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 px-6 py-3", children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+                              /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Zoom" }),
+                              /* @__PURE__ */ jsx(
+                                Slider,
+                                {
+                                  className: "flex",
+                                  value: [zoom],
+                                  onValueChange: (vals) => setZoom(Array.isArray(vals) ? vals[0] ?? 1 : vals),
+                                  min: 1,
+                                  max: 3,
+                                  step: 0.1
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+                              /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Rotation" }),
+                              /* @__PURE__ */ jsx(
+                                Slider,
+                                {
+                                  className: "flex",
+                                  value: [rotation],
+                                  onValueChange: (vals) => setRotation(Array.isArray(vals) ? vals[0] ?? 0 : vals),
+                                  min: 0,
+                                  max: 360,
+                                  step: 1
+                                }
+                              )
+                            ] })
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TabsContent,
+                      {
+                        value: "library",
+                        className: "m-3 bg-muted rounded-lg animate-tabs flex flex-col gap-3 px-6 py-4",
+                        children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[280px]", children: isLoadingImages ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center py-20", children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) }) : libraryImages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center py-20 text-center", children: [
+                          /* @__PURE__ */ jsx(Search, { className: "h-8 w-8 text-gray-300" }),
+                          /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-medium text-gray-500", children: "No images available" }),
+                          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Try uploading an image instead" })
+                        ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: libraryImages.map((src) => {
+                          const isSelected = selectedImg === src;
+                          return /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setSelectedImg(src),
+                              className: `relative aspect-4/3 overflow-hidden rounded-lg border-2 transition-all ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-transparent hover:border-gray-300"}`,
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  "img",
+                                  {
+                                    src,
+                                    alt: "",
+                                    className: "h-full w-full object-cover"
+                                  }
+                                ),
+                                isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-1.5 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 shadow-sm", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-white" }) })
+                              ]
+                            },
+                            src
+                          );
+                        }) }) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      TabsContent,
+                      {
+                        value: "upload",
+                        className: "m-3 bg-muted rounded-lg animate-tabs flex flex-col items-center justify-center gap-4 px-6 py-14",
+                        children: [
+                          /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-gray-100", children: /* @__PURE__ */ jsx(Upload, { className: "h-6 w-6 text-gray-400" }) }),
+                          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700", children: "Upload a new image to replace the current one" }),
+                            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Supports JPG, PNG, WebP formats" })
+                          ] }),
+                          /* @__PURE__ */ jsxs(
+                            Button,
+                            {
+                              variant: "outline",
+                              size: "sm",
+                              onClick: () => {
+                                var _a;
+                                return (_a = replaceInputRef.current) == null ? void 0 : _a.click();
+                              },
+                              disabled: isReplaceUploading,
+                              children: [
+                                isReplaceUploading ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "mr-1.5 h-3.5 w-3.5" }),
+                                "Choose File"
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              ref: replaceInputRef,
+                              type: "file",
+                              accept: "image/*",
+                              onChange: handleFileReplace,
+                              className: "hidden"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            TabsContent,
+            {
+              value: "video",
+              className: "animate-tabs flex-none h-[360px] flex flex-col gap-4 px-6 py-6",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: "Video URL" }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      placeholder: "https://example.com/video.mp4",
+                      value: videoUrl,
+                      onChange: (e) => setVideoUrl(e.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Supports .mp4, .webm, .mov, .ogg direct links" })
+                ] }),
+                videoUrl.trim() && detectMediaType(videoUrl.trim()) === "video" && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border bg-muted", children: /* @__PURE__ */ jsx(
+                  "video",
+                  {
+                    src: videoUrl.trim(),
+                    controls: true,
+                    muted: true,
+                    playsInline: true,
+                    className: "h-48 w-full object-contain"
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            TabsContent,
+            {
+              value: "embed",
+              className: "animate-tabs flex-none h-[360px] flex flex-col gap-4 px-6 py-6",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: "YouTube / Vimeo URL" }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      placeholder: "https://www.youtube.com/watch?v=...",
+                      value: embedUrl,
+                      onChange: (e) => setEmbedUrl(e.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Paste a YouTube or Vimeo link" })
+                ] }),
+                embedUrl.trim() && detectMediaType(embedUrl.trim()) === "embed" && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border bg-muted", children: /* @__PURE__ */ jsx(
+                  "iframe",
+                  {
+                    src: getEmbedUrl(embedUrl.trim()),
+                    className: "h-48 w-full",
+                    allow: "autoplay; fullscreen",
+                    allowFullScreen: true
+                  }
+                ) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "border-t px-6 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(Label, { className: "flex-none", children: "Alt Text" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: alt,
+          onChange: (e) => setAlt(e.target.value),
+          placeholder: "Media description..."
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "border-t px-6 py-3", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleClose, children: "Cancel" }),
+      /* @__PURE__ */ jsxs(Button, { size: "sm", disabled: !canDone, onClick: handleDone, children: [
+        isCropUploading && /* @__PURE__ */ jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" }),
+        "Done"
+      ] })
+    ] })
+  ] }) });
+}
+const EditableMedia = withEditable(CompoundMediaBase, {
+  type: "media",
+  fields: mediaField.objectFields
+});
+const CompoundMedia = (props) => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogData, setDialogData] = useState(null);
+  const [onSaveCallback, setOnSaveCallback] = useState(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      EditableMedia,
+      {
+        ...props,
+        onEdit: (currentProps, onSave) => {
+          setDialogData(currentProps);
+          setOnSaveCallback(() => onSave);
+          setDialogOpen(true);
+        }
+      }
+    ),
+    dialogOpen && dialogData && onSaveCallback && /* @__PURE__ */ jsx(
+      MediaEditDialog,
+      {
+        open: dialogOpen,
+        onOpenChange: setDialogOpen,
+        initialData: dialogData,
+        onSave: onSaveCallback
+      }
+    )
+  ] });
+};
+export {
+  CompoundMedia,
+  detectMediaType
+};

package/dist/components/puck-base/social-links.d.ts

@@ -0,0 +1,7 @@
+import type { BaseSocialLink } from "@/components/puck-core/core/props/interactive";
+export interface CompoundSocialLinksProps {
+    links: BaseSocialLink[];
+    iconClassName?: string;
+    className?: string;
+}
+export declare const CompoundSocialLinks: ({ links, iconClassName, className, }: CompoundSocialLinksProps) => import("react/jsx-runtime").JSX.Element | null;